When I open Google Chrome's developer tools, I do not get the scripts tab. I have done this on two computers, one running Windows 7 and the other Windows Server 2008 R2. Can you please tell me what I need to do to get the Scripts tab back. Many thanks!
Screenshot of what you are seeing? Scripts are under 'Sources' now
There is no scripts tab in the Chrome debugger any more. You can view the javascript under the Resources tab (though I don't find it all that useful in the Resources tab).
You can view and set breakpoints in your scripts under the Sources tab. Go to the Sources tab now, click on the right facing arrow at upper left (right below Elements) and then find the script you are looking for. Click on it there and it will create a tab with just that script in it. You can then set a breakpoint.
Related
I know there are tools which allow us to debug our own website? How can I debug(or analyze) any website, for eg:- Amazon, Google?
Basically, I want to add print functions(in JS) and add breakpoints (in JS) in the execution of a website. How is that achievable, if at all.
We can live-debug (and play-around) CSS and HTML on the browser itself, but how to debug JS on the browser?
On Google Chrome for exemple, open the DevTools window by pressing F12 and right-click on the HTML element. Then go on Break on -> and choose subtree modifications. Your app will stop at page loading and you will be able to do step by step analysis.
I'm trying to debug my site in IE11 but it crashes when opening developer tools by F12.
Apparently this could be because of a CSS loading twice
https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/7115490/
How can I find which CSS causes the issue? I tried to look at the CSS resources loaded in Chrome in the Network tab, but there's no same css called twice. I am not sure it would even display it twice there.
Is there a tool or technique I can use?
Follow these steps to check if (IE or) your web page is loading duplicate CSS files:
Disable script debugging to prevent IE from crashing.
IE > Tools > Internet options > Advanced > Browsing > [X] Disable script debugging (Internet Explorer)
Press F12 to open the Developer Tools window.
Click on the Network tab.
Filter traffic by CSS files.
Content type > [X] Style sheets
Browse to or reload your web page and check to see if there are multiple CSS files loaded twice.
I want to add my extension options menu in system tray icon of Google chrome. I searched it a lot but not found even a hint. Here I saw one extension added it.
Could anyone help to explain that. I even have look into source code of that extension but didn't found answer. So finally here.
This item appears if the following conditions are met:
The extension requests "background" permission.
Chrome settings allow "Continue running background apps when Google Chrome is closed".
This menu item is mostly a reminder "what extensions/apps are keeping Chrome runtime running in backround". If no extensions meet the above critera, the Chrome icon doesn't appear at all.
If clicked, it has a fixed behavior that you can't change:
If the extension has an options page defined, it's opened in a new tab, even if it's the new-style options page that should be embedded in chrome://extensions. That last point is certainly a bug.
If the extension has no options page defined, it opens chrome://extensions/ in a new tab.
I want to debug code at the same time as I see what is being sent on the network tab without having to go back and forth between the Network tab and Sources tab. Is there a way to do this as of chrome Version 52.0.2743.82 or Version 54.0.2810.2 canary?
I know that it is possible to log http request in the console which can be visible with other tabs open but I want the actuall networks tab if possible..
Thank you in advance
This is now possible in Chrome 87. Right click Network in the menu and select "Move to bottom"
and it will do this
You can view 'Quick source' while viewing the Network panel (or the other main panels) at the same. This will allow you to view the source and add breakpoints.
However, it's not possible to step through code using the debugging in the split view. Chrome will automatically switch to the Sources tab if you use the shortcuts.
It's also not possible to have an extension running a separate instance of the debugger as the Chrome Debugging Protocol doesn't allow simultaneous clients to be connected.
I will open up a discussion with other Chromium contributors into the feasibility of sharing the debugging controls in the split view. I don't know whether it will or can be done easily. I suspect it's a fair amount of work.
If you would like to set up the split view, as it's useful anyway, go to overflow menu on the right side and select 'More Tools' and then select 'Show console'. This makes sure the panel loads below the main one.
On the left side of the panel that shows, click the overflow menu and select 'Quick source'.
You will now see a small Sources panel.
Since I was referred here from this question, I'll answer here.
In my scenario I need to be able to work on two different source files (under DevTools->Sources) simultaneously, for instance an html and a css file.
My workaround was to work on two separate tabs.
Right click one of them and click 'Open in new tab'.
When the new tab is open press F12 to open DevTools, and dock the two editors side by side (Focus on one and pressing ⊞+→ then leftwards on the other one).
Result:
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.