Is it possible to delete all breakpoints without opening Chrome devtools?
I have a breakpoint set in a large obfuscated javascript file that cause the current tab to hang if I have devtools open while the page loads. I have no problems if i let the page load, and then open the devtools, but then the script is not visible in the sources and network panels.
I have attempted to disable breakpoints by immediately activating the "Deactivate all breakpoints" button when the page loads, but the breakpoint still triggers causing the tab to hang.
Update: This problem only happens when the sources panel in the devtools is open during page load.
As #Andrey points out, when the dev tools are closed Chrome will never break on a breakpoint.
You can disable breakpoints using Ctrl + F8, hitting F8 afterwards will continue from the current breakpoint.
You can also view a summary of all active BP's in the right of dev tools.
Update:
A last resort option is to clear the dev tools settings as follows. Note this will clear reset any customized settings you have...
Settings > Restore defaults and reload
I finally managed to reset the devtools, including all breakpoints, by simply logging out of chrome and back in again.
Related
Why sometimes refresh of page (F5) does not apply changes on view, even if I have JS and HTML code? I have to clear browsing and tmp files and refresh again. I know that angular saves a lot of cache data but it is very problematic when I want to see changes and there is no update on screen. Than I do not know if it is my mistake in code or there is a problem with Angular. How to fix it?
At development stage you can deactivate the browser cache -
In Chrome Dev Tools go to settings and click "Disable cache (while DevTools is open)" or you can go to network tab and check option "Disable Cache"
In Firefox and IE also we have similar options where we can disable cache while dev tools are open.
For me this is the easiest options without making any code changes.
I have the Chrome Apps and Extensions developer tool installed to debug my Chrome Extension. However, to debug the popup script running in the popup window, you have to perform the following steps:
Refresh the Chrome Extension on the Extensions page
Right click the icon next to the url bar
Select "Inspect Popup"
Set breakpoints
The real annoying part about this is the popup window has to be re-opened every time a change happens. Debugging background scripts I don't have as much of a problem with, because the background script debug page stays open after you refresh the chrome extension. But for popup scripts, the popup window along with the popup debug page keeps closing and it becomes a really tedious, repetitive task to re-open it when debugging a lot. Is there no other way to more easily start debugging Chrome Extensions popup scripts?
As i understood you have a pop up while tapping the icon in the URL bar
In order to debug you can use weinre remote debugger ,Which may solve your problem
apache weinre
I'm in the middle of writing/testing JavaScript code.
I'm using IE9 Developer Tools to debug the JavaScript. When I make a change to the code, refresh the page (Ctrl+F5), and click "Stop Debugging", the JavaScript in the primary content pane is updated. However, when I click "Start Debugging" to test the new code, the content pane reverts to the previous code.
I've tried clearing the browser cache, but this does not resolve the problem.
The only way I can resolve this right now is by restarting the browser, but that is not acceptable, as I shouldn't have to shut down the browser, and then login to the website again just to test changing one line of code.
If I put the debugger statement in my JavaScript source with the Chrome devtools open, it'll stop execution so I can interactively explore the current context from the console. It's really awesome.
But unfortunately it will also switch to the Sources tab and display the line where the debugger statement happened. Most of the time, I want to type JavaScript commands, so I have to manually switch back to the Console tab.
Can I avoid the tab-switching and stay in the Console tab?
Or am I using it wrong?
Right-click on the source-tab and select 'move to bottom'.
Looks like Chrome added a preference for this in the intervening 9 years: https://stackoverflow.com/a/69216922/66673
Quoting that answer:
I had the same issue and it was driving me nuts! The way I managed it to stop switching was to go to into the DevTools settings -> Preferences.
Under Sources options, uncheck Focus Sources panel when triggering a breakpoint.
There's a reason for that - and is that whenever the code has stopped, because of a breakpoint or a debugger statement, you'd usually want to actually see where the execution has stopped. So, the developer tools switches to the Scripts/Sources tab, and this is a common behaviour among the major browsers, that may also show the local variables, the call stack and so on.
The best thing you can do is to keep the console frame always open, so you're ready to work. Just press Esc or click on the second icon on the lower left corner. That's what I usually do.
Switch to the Console tab when you expect to get a large response from the command you type.
So, I have a script called "engine", and after much headbashing and (futile) debugging, I've found out that GC simply isn't reloading it!
This is how I include it in the webpage (inside the <head> element):
<script type="text/javascript" src="engine.js"></script>
When a put 10 console.log("asdf");'s at the start of the script, it's like they aren't there. When I went to the "resources" tab in the GC console, I saw that no changes are being applied whatsoever to that script! Hlep? Would putting a + "?" + new Date() at the end help?
The universal solution that works in Chrome, Firefox and IE is cleaning the cache via Ctrl+Shift+Del (on Mac ⌘+Shift+⌫).
Chrome solution #1
Open Developer Tools (F12 or ⌘+⌥+i, or right-click → Inspect).
Select the Network tab and tick the Disable cache checkbox.
Reload the page.
❗️Note: The cache will be disabled only when the devtools window is open.
Chrome solution #2
This only makes sense if #1 is not used.
Open Developer Tools.
Click the Settings cogwheel icon in the bottom right corner.
In the dialog that appears, select under the Network subsection the Disable cache checkbox: from now on the cache will be skipped when the devtools window is open. When the devtools windows is closed caching will work as usual.
Chrome solution #3: empty cache + hard reload
Open Developer Tools (otherwise the menu in the next step won't show).
Click and hold down the Refresh button, and then select from the dropdown Empty Cache and Hard Reload.
Modifying javascript code
A browser-agnostic solution which could be used for debugging is to append in your server-side code a randomly-generated version string as a query parameter, i.e. call your script as:
<script type="text/javascript" src="myscript.js?ver=12345"></script>
This trick will force the browser to reload the script when the value of the ver parameter changes. If you make ajax requests then you can append "?ver=" + new Date().getTime() to your URL.
NOTE: Don't forget to remove the parameter when you are finished debugging because in production you most likely do want the scripts to be cached. It is a common practice though to generate a new timestamp on each new build — this can be used in production, and will ensure that after a new deployment the clients will always get the updated scripts.
Unlike all the above solutions this one will work even when you have some sort of caching (e.g. redis, memcached, varnish) or CDN (e.g. akamai, cloudflare, cloudfront, etc) between the client and the server.
It is possible that the script is cached so the old version is loading from cache. If you want to make sure you get a new version, you can force a browser reload, clear your browser cache or change the name of the script or put a different query parameter on the end of the filename.
This bugged me as well; CTRL+F5 or SHIFT+F5 never worked...
The only things that works is opening your dev tools (hit F12), and right-click the reload icon next to the address bar and then selecting either "Hard Reload" or "Empty Cache and Hard Reload"
As I said in the comment I guess it's a cache problem, a CTRL+F5 should be enough, in case it is not go for CTRL+SHIFT+CANC and clear browsing data. However sometimes it's the server that has some kind of cache, I say that because with IBM WebSphere I often get cache problems that I can't resolve with a simple F5 on my browser. I just have to wait for my web server to "refresh" itself.
In the latest chrome stable 21st Oct 2016.
Open Developer Tools (F12 or right-click > Inspect or vertical ellipsis icon in address bar right corner > More Tools > Developer Tools).
Click the vertical ellipsis icon in the top right corner of Developer Tools navigation bar > settings.
In the Preferences section find the Network > Disable cache.