How to use Node 8 inspector with Chrome? - javascript

I am familiar with using the --inspect option since node 7 or something. Now on node 8, it's just not working. Today I asked node to use the inspector, as usual:
$ node --inspect --debug-brk node_modules/mocha/bin/_mocha o/**/*.test.js
It responds with this:
Debugger listening on ws://127.0.0.1:9229/97a6264d-a751-4467-ac36-172ff3ebaac1
For help see https://nodejs.org/en/docs/inspector
If I try to open that link, Chrome says:
This site can’t be reached
The webpage at ws://127.0.0.1:9229/97a6264d-a751-4467-ac36-172ff3ebaac1 might be temporarily down or it may have moved permanently to a new web address.
ERR_DISALLOWED_URL_SCHEME
Before it used to be a "chrome-devtools://" link, which worked splendidly.
What gives?
Searching around, I can't find anything I'm supposed to do with this ws:// link.

There is information from nodejs docs
Option 1: Open chrome://inspect in a Chromium-based browser. Click
the Configure button and ensure your target host and port are listed.
Then select your Node.js app from the list.
Option 2: Install the
Chrome Extension NIM (Node Inspector Manager)
I prefer option 2.
Also --debug-brk is deprecated. Node.js 8.x uses --inspect-brk

Related

Launching on android WEBAPP with ADB

Is there a method to launch a web app using adb?
The web app is created using manifest.json and save on android using chrome browser.
I've tried to get the package name of the web application using adb shell pm list packages but nothing seems to match.
I want to launch my web app this way adb shell am start -n com.package.name/com.package.name.ActivityName
I've also tried this way adb shell am start -a android.intent.action.VIEW -d "url". This works but it is not what I am looking for.
Assuming you are coming from Javascript world (as you could have done this by looking at adb logs), this should be what you are looking for
adb shell am start -a com.google.android.apps.chrome.webapps.WebappManager.ACTION_START_WEBAPP -n com.android.chrome/org.chromium.chrome.browser.webapps.WebappLauncherActivity --es "org.chromium.chrome.browser.webapp_url" "{your_url}" --es "org.chromium.chrome.browser.webapp_mac" "{webapp_mac}"
Note that this url has to match the url/url-ending you have mentioned in the start_url that you have mentioned in the manifest.json of yours, else it will just open it as another chrome tab.
Another caveat here is you have to pass web app mac validation check, which is done by the core android class mentioned here - WebappAuthenticator
Chrome does not keep a store of valid URLs for installed web apps
(because it cannot know when any have been uninstalled). Therefore,
upon installation, it tells the Launcher a message authentication code
(MAC) along with the URL for the web app, and then Chrome can verify
the MAC when starting e.g. {#link #FullScreenActivity}. Chrome can
thus distinguish between legitimate, installed web apps and arbitrary
other URLs.
I gave it a shot to open one of the webapps I own. I gave up after a bit, getting lost in the cryptic algos. Maybe you will have some luck with it. All the best!!!

How can i debug a nodejs backend with node-inspector?

I am trying to debug my backend and i am not really sure if i am doing it the correct way.
I have set up the debugging as follows:
Node 6.9.1 and node-inspector 0.12.8
open a command prompt and run the following command:
node-inspector --web-port=3030 (server app port)
open another command prompt and run the following command:
node --inspect --debug-brk server.js
browse to the given URL in the second command prompt log on screen
press F8 to make the server run
eventually put some others breakpoints
browse on another tab to your app (address and port defined in 1-)
see server execution stops on breakpoints defined on step 5.
Now when i run node --inspect app.js and everything looks good so far. I can debug the first start in the app.js. But if I want to debug an endpoint with POSTMAN, I get the error "Cannot POST /api/trainingsWeek". The endpoint works if I don't debug.
Do I have to take another address? Or another tool than POSTMAN?
ANd what is the difference between node --inspect app.js and node-debug
GitHub Issue
UPDATE
This was my stupid mistake :P Here is the solution: https://github.com/node-inspector/node-inspector/issues/907#issuecomment-280620108
I use VS Code to debug. I guess you don't need node-inspector, it will run with the integrated debugger from Node. To get it running, open your project and the debug view. There should be no configuration available. Click on the little wheel -> choose node.js as the environment.
After that the standard json will be created and looks like this:
And then click on the play button with the selection start programm. With that the debugging should run. Now you can use POSTMAN with the same url when you just run your server and the debugger from VS Code should hit your breakpoint.

How can I make node-inspector restart when node is restarted?

I use node-inspector a lot. When I edit my code and restart, I get the inevitable
Detached from the target
Error when a new process starts. I always have to go find the tab node inspector is on and restart it.
I was wondering if I could avoid this. For example, send a message to node-inspector from node to tell the browsers tab running node-inspector to restart.
You don't have to restart the Node Inspector process itself when the debugged process was restarted. All you need to do is reload the browser tab with Node Inspector GUI.
I am afraid there is no easy way at the moment for automatically reloading the Node Inspector GUI page when your debugged process is restarted. It is probably possible to perform some kind of active polling in Node Inspector backend, but that's a feature that would have to be implemented by somebody.
Depending on what part of your application you are debugging, you might find useful the feature "Live Edit". It allows you to edit your code from Node Inspector, save the changes to the Node/V8 runtime and possibly back to disk too. That way you don't have to restart the debugged process after you made your changes.
This feature has been implemented in Node Inspector and released in v0.7.0. See issue #266 for more details.
This feature has been implemented in Node Inspector and released in v0.7.0. See issue #266 for more details.
Previous answer here's a workaround:
I wrote a simple js script to be executed by greasemonkey/tampermonkey.
The script looks for the message "Detached from the target" on tab with address http://127.0.0.1:8080/debug?port=5858. Once the message is visible the page reloads until it disappears.
This solution is a workaround. It shouldn't be considered the ideal solution (I agree with Miroslav), here follows:
// ==UserScript==
// #name Reload node-inspector tab
// #version 0.1
// #description looks for the detached message and auto reload the page
// #match http://127.0.0.1:8080/debug?port=5858
// ==/UserScript==
var exec = function(){
setTimeout(function(){
var el = document.getElementsByClassName("help-window-title")[0];
if(el && el.innerHTML == "Detached from the target"){
location.reload();
} else {
setTimeout(function(){ exec(); }, 1000);
}
}, 1000);
};
exec();
Step1. don't use node-inspector - new work has been shipped by chrome team, which can't be integrated with node-inspector module. Moving forward you gonna miss those features if you stay with node-inspector.
Step2. To run your script use: nodemon --inspect-brk yourScript.js - the brk part creates an automatic break-point on the first line of code. If you don't have nodemon already installed, you do that first using: npm install -g nodemon.
Step3. Then open chrome app, open chrome dev tools (F12 or Ctrl+Shift+I) and click the node icon like so:
Step4. Make changes to yourScript.js - chrome devtools automagically reloads the debugger for every change you make in your project. This is because nodemon watches the project folder and resets the process - which resets the debugger connection.
More here: Debugging in 2017 with Node.js - i'm writing this in 29 august 2019 but 2 years later is still relevant.
Cross-posting slightly from this SO, with an update to this topic.
There is a link in Chrome (58) standard Developer Pane which opens a new "headless" window which reconnects magically to node inspect no matter how the app is rebuilt / restarted.
I'm running Express.js e.g. DEBUG=myapp:* supervisor -- --inspect bin/www & and found it difficult to reconnect using the normal guid-laden URL which keeps changing. But this Chrome tool works all day reconnecting reliably.
Under Threads > Main, you should see "Node instance available. Connect".
I find the new-window less usable as I'd prefer a tab, but the auto-reconnect is so reliable I'll live with that!
The only downside I've found is when it does reconnect it clears all breakpoints.
Sure, it's easy. First install npm install -g nodemon
Then you can run node-inspector & nodemon --debug app.js
(replacing app.js with the name of your script)
Though on syntax error you still may need to reload node-inspector tab manually

How to launch html using Chrome at "--allow-file-access-from-files" mode?

I have the same situation with HERE
And to solve this problem I have to launch html file using Chrome at "--allow-file-access-from-files" mode.
I tried next steps many times, but it doesn't work.
start cmd under windows 7
direct to chrome.exe folder
do this chrome --allow-file-access-from-files file:///C:/test%20-%203.html
That flag is dangerous!! Leaves your file system open for access. Documents originating from anywhere, local or web, should not, by default, have any access to local file:/// resources.
Much better solution is to run a little http server locally.
--- For Windows ---
The easiest is to install http-server globally using node's package manager:
npm install -g http-server
Then simply run http-server in any of your project directories:
Eg. d:\my_project> http-server
Starting up http-server, serving ./
Available on:
http:169.254.116.232:8080
http:192.168.88.1:8080
http:192.168.0.7:8080
http:127.0.0.1:8080
Hit CTRL-C to stop the server
Or as prusswan suggested, you can also install Python under windows, and follow the instructions below.
--- For Linux ---
Since Python is usually available in most linux distributions, just run python -m SimpleHTTPServer in your project directory, and you can load your page on http://localhost:8000
In Python 3 the SimpleHTTPServer module has been merged into http.server, so the new command is python3 -m http.server.
Easy, and no security risk of accidentally leaving your browser open vulnerable.
Search for the path of your Chrome executable and then, on your cmd, try :
> "C:\PathTo\Chrome.exe" --allow-file-access-from-files
Source
EDIT :
As I see on your question, don't forget that Windows is a little bit similar to Unix, so when you type "chrome ...", cmd will search for Chrome in the PATH, but in general the Chrome folder isn't on the PATH. Also, you don't specify an extension for your executable... So if you move to Chrome's folder, this command will probably work too :
> .\chrome.exe --allow-file-access-from-files
You may want to try Web Server for Chrome, which serves web pages from a local folder using HTTP. It's simple to use and would avoid the flag, which, as someone mentioned above, might make your file system vulnerable.
As of this writing, in OS X, it will usually look like this
"/Applications/Google Chrome.app/Contents/MacOS/Google Chrome" --allow-file-access-from-files
If you are a freak like me, and put your apps in ~/Applications, then it will be
"/Users/yougohere/Applications/Google Chrome.app/Contents/MacOS/Google Chrome" --allow-file-access-from-files
If neither of those are working, then type chrome://version in your Chrome address bar, and it will tell you what "command line" invocation you should be using. Just add --allow-file-access-from-files to that.
Don't do this! You're opening your machine to attacks. Instead run a local server. It's as easy as opening a shell/terminal/commandline and typing
cd path/to/files
python -m SimpleHTTPServer
Then pointing your browser to
http://localhost:8000
If you find it's too slow consider this solution
If you are using a mac you can use the following terminal command:
open -a Google\ Chrome --args --allow-file-access-from-files
Quit (force quit) all instances of chrome. Otherwise the below command will not work.
open -a "Google Chrome" --args --allow-file-access-from-files
Executing this command in terminal will open Chrome regardless of where it is installed.
REM Kill all existing instance of chrome
taskkill /F /IM chrome.exe /T
REM directory path where chrome.exe is located
set chromeLocation="C:\Program Files (x86)\Google\Chrome\Application"
cd %chromeLocation%
cd c:
start chrome.exe --allow-file-access-from-files
save above lines as .bat file
Depending on the file which will be put into filesystem, as long as that file is not a malware, then that would be safe.
But don't worry to write/read file(s) to File System directory, cause you can tighten that directory security (include it's inheritance) by give a proper access right and security restriction. eg: read/write/modify.
By default, File System, Local Storage, and Storage directory are located on "\Users[Current User]\AppData\Local\Google\Chrome\User Data\Default" directory.
However you can customize it by using "--user-data-dir" flag.
And this is a sample:
"C:\Program Files (x86)\Google\Application\chrome.exe" --user-data-dir="C:\Chrome_Data\OO7" --allow-file-access-from-files
Hope this helps anyone.
Well there is quick to run a html which needs permission or blocked by CORS
Just simply open the folder using VSCODE and install an extension called "live server"
And then just click on the bottom which says go live, thats it.
Screenshot
On windows:
chrome --allow-file-access-from-files file:///C:/test%20-%203.html
On linux:
google-chrome --allow-file-access-from-files file:///C:/test%20-%203.html
I tried using the allow file access, but thought there was a better way. Found code that will pipe local file share files through http.
https://gist.github.com/andrii-riabchun/07f854939ce776f6e54ba6b64f43cc92
I added some edit suggestions. I used the revision code along with my edit suggestions. Also added a simple script to create index.html from ls ran on the webserver.
I use
google-chrome-beta --user-data-dir="/tmp/tmp-chrome-user-data-dir" --allow-file-access-from-files --disable-web-security file:///home/myuser/projects/myproject/myhtml.html
to disable has been blocked by CORS policy when I try to request('file://xxx')

What's the right way to enable the node debugger with mocha's --debug-brk switch?

I have some debugger statements in my module under test and want to run mocha with --debug-brk set and hit my breakpoint so that I can inspect the state of my module. Unfortunately, whenever I run mocha with this option, I end up with a blank cursor on the next line. I can enter text, but there's nothing that appears to be processing my commands (it certainly doesn't look like the node debugger):
$ mocha --debug-brk tests.js -R spec
debugger listening on port 5858
[BLANK CURSOR]
Am I doing something wrong with how I'm launching mocha?
UPDATE
As of mocha 7.0.0, --debug-brk has been removed in favor of --inspect-brk
Using a recent version of nodejs (>=v6.3.0) and mocha (>=3.1.0), you can use V8 inspector integration.
V8 Inspector integration allows attaching Chrome DevTools to Node.js
instances for debugging and profiling
Usage
--inspect activates V8 inspector integration, and --debug-brk adds a breakpoint at the beginning. Since nodejs v7.6.0 and mocha v3.3.0, you can use the --inspect-brk shorthand for --inspect --debug-brk
$ mocha --debug-brk --inspect
Debugger listening on port 9229.
Warning: This is an experimental feature and could change at any time.
To start debugging, open the following URL in Chrome:
chrome-devtools://devtools/remote/serve_file/#62cd277117e6f8ec53e31b1be58290a6f7ab42ef/inspector.html?experiments=true&v8only=true&ws=localhost:9229/node
With npm scripts
If you have a npm test script that uses mocha, you can pass the options from npm to your mocha script by using the end of option delimiter --:
$ npm test -- --inspect --debug-brk
Chrome tip
Instead of copy-pasting the url each time, go to chrome://inspect and click the appropriate link in the "Remote target" section.
To answer the original question, even though I also suggest you look into node-inspector: you can use the CLI debugger built into node through mocha with the debug option, instead of the --debug or --debug-brk flags. (Notice the lack of dashes.)
In your example, instead, it would be:
$ mocha debug tests.js -R spec
debugger listening on port 5858
connecting... ok
break in node_modules/mocha/bin/_mocha:7
5 */
6
7 var program = require('commander')
8 , sprintf = require('util').format
9 , path = require('path')
debug> [CURSOR]
Again, debug as above in bold, with no dashes. (=
Relevant: https://github.com/visionmedia/mocha/issues/247
I was able to get this to work using node-inspector. I run my test like you show in one shell:
mocha --debug-brk mocha/test.js
and then run node-inspector in a second shell:
node-inspector
Bringing up the URL that node-inspector spits out in a browser allows me to debug with the web inspector.
http://127.0.0.1:8080/debug?port=5858
If you have node-insector installed you can debug you Mocha tests without actually running node-inspector first. The easiest way is to
node-debug _mocha
That should start debugging the node tests in chrome (also works on Safari)
One reason I have seen that the tests do not work is sometimes you gave to try http://localhost:8080/debug?port=5858 or http://127.0.0.1:8080/debug?port=5858
run mocha with flag --inspect-brk and click 'open dedicated DevTools for node' in chrome from page chrome://inspect. In dedicated DevTools window add connection localhost:9229 to connect automatically.
Also add a debugger statement to the file you want debug.
(this is using latest versions of node and chrome as of October 2017)

Categories