Develop Reference

Chrome DevTools for Node.js not loading source maps

I am working on a node.js API. We use typescript and I use Chrome dev tools for debuging. In the last day when I started the chrome node inspector it could not load my resource maps. I tried making a small mock project and it happened for that one too.
The warning it gives is DevTools failed to load source map: Could not load content for file://<path_to_source_map>: No setting registered: network.enable-unc-loading. I have the latest version of chrome 105 and I am on macOS 12.5.1.
I was thinking it might have something with mac permission but when I take the link to the file file://<path_to_source_map> and open it in browser it can open my file and I can add the file trough workspaces but it cannot link them even if I do it manually. I do not know if it is a chrome setting or what.
Any ideas ?

I've found this setting:
But this setting is not available in the Dev Tools console for Remote Targets so it didn't fix the issue.

chrome devtools, how to open when in kiosk mode

I've got a chrome kiosk application that talks to a local C# webapp. This is on windows.
Were in the final stages of development and once we turn on and run chrome in kiosk mode, we can't get to the devtools to say, look at an an error in the console.
Is there a way to open the devtools via javascript? I've looked doesn't seem possible.
Any other techniques/approaches possible to collect the log on request?

If you run Chrome with the --remote-debugging-port=9222 option it will provide access to DevTools at http://localhost:9222/.
Source: How to debug a Kiosk Chrome application running on a Chromebox?

Chrome developer tools closes JetBrains IDE support plugin

I debug with PhpStorm 2016.3 my JavaScript code remotely using JetBrains IDE support plugin for Chrome (my Chrome version is 56.0.2924.87 (64-bit), plugin version is is 2.0.9).
When I try to open Developer tools in Chrome, JetBrains IDE support plugin instantly closes connection.
Is it possible to keep both PhpStorm debugging plugin up and see what is happening in Network tab in Chrome?

This is a limitation in Chrome:
We currently do not support multiple clients connected to the protocol simultaneously. This includes opening DevTools while another client is connected. On the bug tracker, crbug.com/129539 follows the issue; you can star it for email updates.

How to test firefox plugin locally

I have a basic Google Chrome extension which needs to be ported to Firefox. I uploaded the .crx file to the Firefox marketplace and it got accepted but is under review rightnow. I downloaded the the generated xpi file and tried to install it locally but without any success. It tell that the plugin is invalid or corrupted.
Another method that I tried is I ported the extension using chrome-tailor and generated the xpi. I am able to install the extension in this but the content scripts are not injected and the extension doesn't work as expected.
I want to install it in Firefox and test it. I have also set xpinstall.signatures.required to false.

WebExtensions
To test WebExtension based add-ons, they are usually loaded as a "Temporary Installation in Firefox"
That MDN page describes how to temporarily install a WebExtensions (i.e. similar code to Chrome) in Firefox. The gist of it is:
Navigate to about:debugging
Click the button "Load Temporary Add-on"
Use the file selection dialog to select the manifest.json file, or packaged .xpi file for the extension.
Note on testing WebExtensions:
The WebExtensions API is still in development. For now, you are probably best off developing and testing your WebExtension add-on with Firefox Developer Edition, or Firefox Nightly. You should also make careful note of what version of Firefox is required for the functionality you desire to use. This information is contained in the "Browser compatibility" section of the MDN documentation pages.
Firefox Add-on SDK
To test Firefox Add-on SDK based ad-ons, use jpm run. You might want to take a look at this answer to "jpm run does NOT work with Firefox 48, or later"

Debugging JavaScript Angular application in WebStorm using Google Chrome

I'm trying to debug some controller code in an Angular application in WebStorm using Google Chrome.
My Debug Settings :
When running theses Debug settings :
1) Chorme flickers in the Taskbar as if it is trying to connect.
2) I don't see the Debugging Tab (Indication) usually shown at the top of the page (like a brownish header)
3) In WebStorm's Debugger window i get the following message
"cannot connect , ensure that Web Inspector is closed "
Additionally I was able to debug my code using Chrome development tools.
Any idea what is interfering the Webstorm's Debugger from connecting to Chrome ?

Have you installed "JetBrains IDE Support" extension for chrome?
if your web server is running in localhost:63342, try:
Setting the URL parameter to http:// localhost:63342
Bind your index.html file to http:// localhost:63342/index.html
If you have any question, please have a look to this post which describes how to debug Angular with Intellij, step by step:
http://ignaciosuay.com/how-to-debug-angularjs-with-intellij/

I encounter the same problem as you,but I have find the solution.You just lack a simple but important step,which is Overriding the default CORS settings.You can follow:
Right-click the JetBrains Chrome extension icon and choose Options
on the context menu. A web page with Chrome extension options opens
showing the parameters to connect to WebStorm.
Change the port which you can find in your WebStorm.Then,you can
debug your AngularJS app in the Chrome.
You also can see https://www.jetbrains.com/webstorm/help/using-jetbrains-chrome-extension.html

first check Jetbrains IDE Support install on your chrome then right click on icon go to option check port, I use routing in my angular application for this reason in URL of webstorm javascript debug not selected the specific html file just for example (http://localhost:63342/sampleproject/) write on urlbox then breakpoint in controllers worked . this solution worked for me