Problem with TailwindCss on Chrome and Safari - frontend

I just finished my first project with TailwindCSS the output on FireFox is OK but on the Chrome => blank page & Safari => messed up version.
Any idea about what is happening? I don't get any errors on Terminal and everything seems clear and correct there.
THX

Related

Jest with puppeteer using existing chrome browser

I am trying to make puppeteer work with Jest for e2e testing while using existing Chrome browser.
I choose my puppeteer version "5.1.0" for chrome browser version "84.0.4147" from the list of supported browsers.
I am trying to configure Jest with puppeteer using the information aviable at the following link
Jest Puppeteer configuration using jest-puppeteer
apparently puppeteer library tried to download chromium browser binary which i have skip b/c i would like to use existing chrome browser. and i am having hard time configuring that.
There is some help here at jest puppeteer preset documentation but still not enough help how to use existing browser.
I am assuming using existing chrome configuration should be in jest.puppeteer.config.js but don't know yet how to do it !
Rite now my jest-puppeteer.config.js looks as following
module.exports = {
launch: {
headless: false,
slowMo: false
devtools:true
},
browser: 'chromium'
browserContext: 'default'
}
when i run my tests, i get following error
Error: Could not find browser revision 800071. Run "PUPPETEER_PRODUCT=firefox 7pm install" or "PUPPETEER_PRODUCT=firefox yarn install" to download a supported Fire fox browser binary"
https://developers.google.com/web/tools/puppeteer/get-started
By default, Puppeteer downloads and uses a specific version of Chromium so its API is guaranteed to work out of the box. To use Puppeteer with a different version of Chrome or Chromium, pass in the executable's path when creating a Browser instance:
const browser = await puppeteer.launch({executablePath: '/path/to/Chrome'});
i was still getting same error with the above answer but following solution worked for me.
https://docs.percy.io/docs/skipping-puppeteer-chromium-download

Visual studio code: intellisense not working, showing "initializing JS/TS language feature"

Intellisense isn't working in VSCode. Examples like:
F2 (rename symbol): shows "initializing JS/TS language feature", but stucks forever issue-image
dropdown suggestions not coming up directly, ctrl+enter shows loading, but not getting completed
doesn't show error even in case of genuine error, etc.
Already tried below things:
restarted VScode multiple times
Ctrl+Shift+P > typescript: Restart TS server --> nothing happens
Installed & uninstalled extension (TSLint, JsHint, ESLint)
"Help" -> "check for updates" --> says "there are currently no updates available"
re-ran all command i.e. npm run setup-npm-auth, npm install etc.
tried force build
{verified my solution is getting built properly}
Current versions:
npm: 6.9.0
node: 10.16.3
VScode version
I just had the same issue. Fortunately I was able to fix the problem following this steps from vscode github's comments. You can enable ts language server's log and debug your issue. To enable ts server logging:
Set "typescript.tsserver.trace": "verbose" (Restart vscode)
Reproduce the problem
Open the output panel and view the TypeScript section
In my case my code was referencing to the directory outside of the workspace. So VSCode could never finish the task. I am not sure it's bug or limitation, nevertheless make sure all of your working code is included in your VSCode workspace (or added to working folders). Otherwise it'll stuck like this even code you're referring to exists side by side but not included in your workspace (or visible) in your VSCode.

Node inspect in chrome does not show source files

Node inspect does not show source code to debug in chrome devtools.
I tried to run code using command
node --inspect server.js
then i opened chrome://inspect/#devices
and then clicked Open dedicated DevTools for Node.
But this doesn't show up my server.js file but shows recently opened files in devtools.
Found the problem. There is an issue in chrome. Here is the link of the issue https://bugs.chromium.org/p/chromium/issues/detail?id=941608#c15
By updating chrome into beta version, solve my problem.

node inspector -brk not working

I am trying to use node-inspector with a simple script. I have some console logs in place so I can tell if it's running or not. I have tried 2 ways:
node-debug test.js
With this approach, the debugger opens in chrome, but does not break and runs without giving me a chance to enter break points.
In terminal window #1:
~ $ node-inspector
Node Inspector v0.9.2
Visit http://127.0.0.1:8080/debug?port=5858 to start debugging.
Open debugger in chrome. In terminal window #2:
node --debug-brk test.js
The script seems to be waiting, but the debugger window I opened has nothing going on, So I refresh the page. As soon as I do, I see my console logs (not breaking).
I'm running OSX Yosemite (10.10.1), Node.js v0.12.0, NPM 2.5.1, and Node-inspector v0.9.2.
Any ideas why this is happening?
This is a known bug when running on Node v0.12 and io.js, see https://github.com/node-inspector/node-inspector/issues/534

Node inspector debugging

I am currently having trouble getting node inspector to work with Google Chrome. I am on Windows 7 64 bit.
here is info about node-inspector:
https://github.com/node-inspector/node-inspector
when I run the following
node-debug app.js
on a simple JavaScript file called app.js:
a = 5;
b = 6;
c = a + b;
console.log(c);
and I open up Chrome with the following URL:
http://localhost:8080/debug?port=5858
all I get is this empty page with nothing loaded except one little part of the Chrome debugging toolbar, no matter what I do, I even reinstalled Chrome ( and the Canary developer version too):
Anyone have any idea what could be going wrong? This is the simplest JavaScript application ever, and there node-inspector directions does not specify any other steps to take. Like I said, I resinstalled Chrome. I have node version v0.10.30, npm version v1.4.21 version and node-inspector version: v0.7.4.
Does anyone have a good idea how I can test Chrome debugging tools without involving node? I am new to all this.
When I installed node-inspector, I did get what looks like a warning:
Try starting it without node-debug wrapper.
So, install node inspector:
npm install -g node-inspector
In one terminal:
node --debug-brk app.js
In a different terminal:
node-inspector
Browse to http://localhost:8080/debug?port=5858
i had the same issue. i then uninstalled node-inspector, installed it again. closed the cmd prompt which installed node-inspector (maybe this step made the difference). opened another cmd prompt to node-debug my.js. i can see the source file now.
I had a similar issue where going to http://localhost:8080/debug?port=5858 would result in an empty page. However going to http://127.0.0.1:8080/debug?port=5858 seems to do the trick.

Resources