Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Chrome Devtools is missing Sources when attached to remote Node JS

I'm running Chrome 67 on Windows connecting to my Ubuntu PC which is running NodeJS 8 I have an ssh tunnel setup to the Ubuntu PC so I can connect the Chrome Debugger to Node.

Chrome://inspect/#devices correctly spots the Remote Target

This allows me to click on the inspect link to open the debugger.

The Debugger connects and the console prints debug data from the running Node JS app confirming that things look good.

In the console messages, I can click on the links and have them open the source files

If I click on the Sources tab, I expect to see a Sources side panel (ref) displaying the file hierarchy but it seems to be completely lacking.

screenshot of chrome dev tools

enter image description here

If I click on Add folder to workspace then it opens up a local file browser.

Has this feature been removed in newer versions of Chrome? If so is there a new way to view the remote file list?

like image 626
roskelld Avatar asked Jun 19 '18 06:06

roskelld


People also ask

How to debug Node JS app with Chrome Dev Tools?

You can use Chrome's DevTools to debug Node.js applications. It's called remote debugging and can be started from Google Chrome's internal website. To inspect your Node.js app with Google Chrome DevTools, you have to make it a remote target.

How do I inspect my node app with Google Chrome DevTools?

To inspect your Node.js app with Google Chrome DevTools, you have to make it a remote target. This can be done by using the --inspect flag when starting the node process:

How do I navigate between sources in DevTools?

To help you navigate sources, the Sources > Page pane can group the files into two categories: Authored. Similar to the source files you view in your IDE. DevTools generates these files based on sourcemaps provided by your build tools. Deployed. The actual files that the browser reads. Usually these files are minified.

Why is node_modules not working in my project?

If it isn't working in your current project, a strategy to narrow down the problem is to to create a new test project (simply keep the sample content) and check if it works there. If it works there (as it should), compare the config files if there is a difference. Another option is to remove & re-install the node_modules.


1 Answers

Do not click on Inspect under Remote Target

Click on Open dedicated DevTools for Node

enter image description here

This will launch a specific version of DevTools configured for Node which features the Node file system

like image 164
roskelld Avatar answered Oct 13 '22 11:10

roskelld