Whenever I write a script inside Google Chrome using the Developer Tools > Sources > Snippets, I'm not able to edit the script content after I hit run
The Console generates the log, but clicking on the script panel has no effect. I'm able to select the content, but that's all. The only way to clear the content or type again is deleting the current snippet file and/or creating an empty one
Some people said it could be due to one of my extensions, but I've already tested in a new Chrome window logged as a Guest user and the output was the same. It happens on Windows 10 and Ubuntu 20.04 as well
Related
Chrome (and Canary) used to be able to show javascript source which was embedded in aspx files.
Typically, I would add a debugger; statement, save, and then load my web page in Chrome with the developer tools window open. When Chrome hit the debugger; statement, it would stop and then show the javascript source, so that I could inspect variable or step through code.
A recent change has changed this so that now, when the debugger; statement is executed, Chrome dutifully stops execution but it is unable to show the source.
Does anyone know what has changed; if there are any configuration settings which would re-enable the previous behavior; or how to make this work correctly?
Chrome version: 50.0.2661.102 m (on Windows).
I'm also seeing this in version 53.0.2763.0 canary (64-bit)
I suspect this applies to any kind of embedded script, not just aspx.
I had the same problem. When I clicked on the aspx page, under the Sources tab, I got a blank page.
What worked for me was refreshing the page in Chrome.
After that, the aspx code showed up in Developer Tools, and I was able to see , debug and search the code. This seems to be a Chrome bug.
Chrome Developer tool: html script is blank (in source) debugging tutorial
I can debug with IE without any problem, but when I try different browsers code is not stopping on breakpoints. I hava a project that is currently not compatible with IE. I'm using OpenJSCAD as a dependency in my project, therefore I need to debug on Chrome or Firefox.
Is it possible to debug Java Script with Visual Studio 2015 on Chrome or Firefox?
You can absolutely do it, however it is a bit tricky to do. In the toolbar, click the button to get the dropdown of browsers to debug with and then click "Browse with...". Click "Add...", set Program to wherever Chrome is on your machine and set Arguments to --remote-debugging-port=9222. You can also set Incognito as I have to ignore cache but it is not required.
Important! Chrome cannot be started before, Chrome needs to start fresh from Visual Studio otherwise debugging won't work.
After this goto "Debug" -> "Attach to Process..." -> select the chrome instance with the title of your project or similar and then click Attach.
If everything works you can now Debug your Javascript in Visual Studio and use all Chrome features as well.
Note that when you have attached to the process you can't just stop
debugging without terminating chrome.exe. However you can get around
this by clicking "Debug" -> "Detach all".
Javascript debugging in visual studio is not possible when we use non IE browser as debugging browser. The developer tools available on non-IE browsers are the first alternative(F12) to the JavaScript debugging.. If they are still not helping, the one should look for third party tools like https://www.jetbrains.com/webstorm/features/#JS_debugging
More Info on Debugging
I had this problem... And I realized what was happening, it was in my web/javascript App. I had an ahref link target='_blank', which created a new window out of the debugging process. So when in the new window no debugging. When in original VS window debugging works. Either temp disable the target _blanks, or hand change the URL in your current window.
Remember to set the Select "WebKit Code" as the "Attach to" option.
Also, to avoid having to start a fresh chrome every time I use Chrome Canary as the target process.
One thing I find annoying with this is that breakpoints placed in the original .js source files are ignored as VS creates "dynamic" script files in which the actual debugging is performed, I wonder if these can be synced somehow?
While developing some JavaScript using Chrome 38.0.2125.122 m Developer Tools, I clicked on an error in the JavaScript console and was met with the following message:
Drop workspace folder here
Why isn't Chrome taking me to the offending line on the offending file, as usual? What is a workspace folder? What am I expected to do?
Seems like it is another way to add a workspace to the DevTools (another way of doing this: https://developer.chrome.com/devtools/docs/workspaces#).
It happened for me when I dragged a file to an open browser page and the file was accidentally dragged over the open DevTools. If you want this to go away you can drag and drop a dummy file. This way there is no need to restart Chrome.
This happens in recent versions of Opera browser too.
For me it happens when I drag a file or folder over any part of the dev panel, even while it is behind other programs or folders.
The prompt does not always stick, but when it does, dragging any file off my desktop back over the dev panel usually un-sticks it. It doesn't seem necessary to drop the file in the prompted area, but that works too.
In addition to Alexandra's answer link, there're discussions on the GoogleChrome git pages discussing 'workspaces'.. personally I don't use it, I prefer a full editor.
I'm trying to find a way to view the generated source using IE 10. With the Chrome dev tools and Firebug I can see the HTML source post JavaScript/AJAX operations but in IE 10 the view source command and dev tools both only show the downloaded source.
I'm building a single page javascript web app and am running into an issue in the generated source that only happens in IE. Using something like ChromeFrame or punting on the issue is not an option. I need to find and fix the root issue that is causing it in IE.
Do you all know of a different set of dev tools or a toolbar that is produced for IE 10 that will allow me to inspect this elusive generated html?
Thanks!
Just press F12. If the DOM was manipulated via AJAX, you'll need to use the blue refresh button per the comments below.
I use alert(document.documentElement.outerHTML) to achieve this
I've been working on a Chrome extension and I have a minor annoyance with debugging my scripts. My background page is a Javascript file and it is always minified automatically by Chrome. You can see how this becomes a pain to use the developer tools on because everything is on a single line. Anyone know if this can be disabled?
To view your Chrome extension source normally:
1 open Chrome's extension management page
2 make sure developer mode is checked
3 click link after inspect views to open extension files in chrome developer tools window
4 click link to included script file in background page to view background script
Perhaps this is relevant.
http://www.elijahmanor.com/7-chrome-tips-developers-designers-may-not-know/
The ability to Pretty Print ( a.k.a. unminify ) JavaScript source
Sometimes I'm trying to figure out a bug and unfortunately the JavaScript that was included has been minified. As you are aware trying to debug a minified file is nearly impossible. How do you set a break point on a line that is a bazillion characters long?
Thankfully Chrome has a Pretty Print feature that will take a minified JavaScript file and format it property. All you need to do is to click the "{ }" icon on the bottom toolbar to activate this feature. Of course the names will still be obfuscated ( depending on what program minfied the JavaScript in the first place ), but you will at least be able to set break points and debug the code.