Debugging javascript in runtime with webstorm - javascript

I'm trying to debug an html file with js injected itself, so I set some breakpoints inside the js part and when I run it it debugs at the first run, but then when I want to using the console (in Chrome) it stops debug and the breakpoints of course are not affected.
when I get inside the Chrome's console as I said it stops debug and shows me the following message: Disconnected (tab was closed or Web Inspector was opened or explicitly detached via Chrome info bar). disconnected means stops debug.

This is a Chrome bug, please vote for http://code.google.com/p/chromium/issues/detail?id=129539

Related

While running VS Code Live Server (Go Live), the browser is crashing. I am using Google Chrome as default

While running VS Code Live Server (Go Live), the browser is crashing with the below mentioned error. I am using Google Chrome as default. I re-installed VS Code after uninstalling completely (from cache even), restarted browser, and then restarted PC as well with no use. When I checked "Use Local Ip" in LiveServer>Settings:, server is taking too long to respond and eventually fails to load the page (Error: "This site can't be reached"). Another important thing is that Chrome is opening every other website properly. This problem exists only when opening VS Code Live Server. Below is the error code:
Chrome Browser Error:
"Aw, Snap!
Something went wrong while displaying this webpage.
Error code: STATUS_BREAKPOINT"
Another popup is also showing up simultaneously:
"DevTools was disconnected from the page.
Once page is reloaded, DevTools will automatically reconnect."
(This didn't seem like a bug in the code of script.js)
Found the Solution:
Indeed it is a bug in the code of script.js.
If you are having exactly the same problem as I described, let us first see what we don't need to do, as I found these suggestions everywhere, and none will work when both VS Code and your browser are perfectly fine (they only appear to be not working):
No need to restart or reinstall VS Code.
No need to restart or reinstall browser.
No need to restart the PC
No need to disable browser extensions or VS Code extensions.
No need to change LiveServer Custom Browser; you can keep it
default.
No need to change LiveServer>Settings>Use local ip or Use browser
preview (you can keep them both unchecked if they are already
unchecked by default)
However, if you use firefox, console shows the error: "Uncaught out of memory"
Here, I got the first hint. Firefox at least told me to look at memory, but it is not about the memory we think. It is not about multiple tabs opened, lack of disk space, unstable disk, etc. It is the accidentally generated infinite loop in the code which is causing the memory problem (check your code carefully to find it).
In my case, I accidentally didn't tell it to execute the next iteration (i.e., missing counter update, increment, i++) and it is stuck in the same while loop forever, as the condition is satisfied forever without any counter update.
After fixing the code, the below error might show up in the console. Just refresh the page and it will go away.
"favicon.ico:1 Failed to load resource: the server responded with a status of 404 (Not Found)"
Note: Unless you fix the code or comment it out, other linked files (like .html) in the folder wouldn't work either.

Google Chrome Dev-tools crashes. Error code: STATUS_BREAKPOINT

I have been working on a chrome extension to interact with some DOM elements and put it in a JSON format and have found a bug in my code.
I am able to place the breakpoint in the window but once I reload the page so my script gets reinserted to run from the start my window crashes with the following error message
I have tried to do the same thing on other websites and have had no issues using breakpoints on them. Only this one website seems to have an issue with it.
I have gone through chrome's suggested trouble shooting by reinstalling chrome and clearing my cache and browser history but that also did not work.
Has anyone else encountered and solved this error in the past?

Unable to debug Javascript in browser

I am trying to debug through some JS code in firefox. When I click on a certain file (CometdWorkerJs.js) in console, that file does not open in Debugger-Sources tab, but rather opens as raw text file. Other files open normally in Debugger-Sources tab. Due to this, I'm unable to debug through this file CometdWorkerJs.js. I've also observed the same behaviour in other browsers like Chrome.
Why does this happen? Is there a way to debug through this file ?
Screen recording of my browser's inspect window -
I found the solution to this. The code I was trying to debug is being executed inside a web worker. In chrome, the same can be debugged in chrome://inspect/#workers.

the script debugger failed to connect to the target process. Adebugger is already attached

Windonws 7 64-bit and VS2010
In F12 developer tools for IE11 on Windonws 7 64-bit and VS2010, when I click the Debugger tool icon or press Ctrl + 3 to open the tool, I'm not able to debug my java-script files.
When I click the Debugger tool icon, i'm presented with the message in the screenshot above & I can't see the javacsript files my current page calls, so I'm unable to debug my javascript code.
Any one knows why I could be getting this message? I have tried everything mentioned at the following link with out success. VS2010 and IE10 Attaching the Script debugger to process iexplore.exe failed
I was encountering this problem with VS 2012 & Win 7 and also VS2013 and Win8.1:
Perplexed for half a day, looking up things online, finally figured it out myself.
Learn the difference between these in Visual Studio: F5 vs (Ctr+Shift+W)
F5 will engage VS debugger and you will get the:
"The script debugger failed to connect to the target process. A debugger is already attached"
when using the F12 Developer Tool in I.E. 11 or whatever version.
However, if you use the V.S. command: View in Browser(Ctrl+Shift+W) this will run the script and allow I.E's script debugger(F12 Dev Tool) to engage and work.
The easier way for me was:
Run project(F5) in Firefox (or any other browser, not IE).
Copy adress.
Close Firefox (project will keep running, atleast did in myn).
Open IE and input address manually (ex: http://localhost:58100/) by pasting what you copied in '2.'.
IE Debugger should work at this point.
You should use ctrl+F5 instead of F5 so your application runs without debugging
I see this post is referred to Windonws 7 64-bit and VS2010, but I am using Windows 10 32 bit and VS Professional 2012 along with IE 11. I got the same message as shown in screenshot:
IE 11 Error message
How I resolved this problem(after starting Debugging):
went to debug tab in VS
then windows
select processes
There you will see two processes attached one will be "IIS" and second will be "IE.exe" with description "script". Detach the second one and then hit F12 in IE where your code is running.
When I did iisreset from command prompt, I could resolve this issue.
Open CMD in admin mode -> type IISRESET -> enter

How can I debug a Firefox extension with Firebug?

I'm trying to use Firebug to debug a JavaScript file in an extension I've added to Fx 4.
Can anyone tell me how to do it? I can only see website scripts.
Use Chromebug it's firebug for extension development, witch will give you the full ability to inspect debug firefox it self and all firefox extension as if it's a webpage :)
1- install the latest version from here: http://getfirebug.com/releases/chromebug/
2- Winkey+R to open run then type firefox.exe -chromebug this will run firefox with chromebug
3- for more information visit http://getfirebug.com/wiki/index.php/Chromebug
Please see MDN - Building An Extension - Debugging Extensions, which shows what tools Firefox provides you with to natively debug extension, also take a look at Dive Into Greasemonkey - Debugging User Scripts (PDF, p.13) which is aimed more specifically at your request.
Other than that, see How to debug a Greasemonkey script with the Firebug extension?
On Firefox 19 or later, it's possible to use the built-in JS debugger on the browser itself. Go to about:config and set the following two prefs:
devtools.chrome.enabled: true
devtools.debugger.remote-enabled: true
After you restart the browser, you can access the Browser Debugger through Tools > Web Developer > Browser Toolbox.
(note that you must accept the incoming connection)
See more at: https://developer.mozilla.org/en-US/docs/Mozilla/Debugging/Debugging_JavaScript#JavaScript_Debugger
In the bottom right hand corner there should be a little Firebug icon. Single or double click to open then you see some tabs at the top. Click the "Console" tab for real time debugging, or the "SCript" tab to view the scripts that have been loaded. Note, you can also load CSS and HTML through Firebug, use the "Viewer" icon to view HTML code on the page in real time.

Categories