I have a rogue blank <div> getting inserted from somewhere in my code, and it is difficult to find when it is coming in. I am using debugger; and stepping through the code, however, the step function is in the 'Sources' tab of chrome dev tools, and the 'Elements' tab has the view I need. I have two screens, and have the dev tools on one screen and the page on the other, but I need to see when the div is coming through on the HTML as I step through the code, and it is quite cumbersome to switch tabs after each click.
Is there any way to accomplish this view to troubleshoot faster (maybe a second instance of dev tools? or split the tabs?), or another suggestion? Since I don't know how it is getting generated, I can't color the div and just look for the color to come on screen...
It is still not possible to display the elements and source tabs at the same time on chrome dev tools. (Latest Chrome version: v64).
If some element is inserted to your DOM and you want to find code responsible for adding it then I suggest using more appropriate tool than debugger;. Check out "subtree modifications":
You can now right click the view tab and select "Move to bottom" so you can see both element and sources at the
Now its possible to view the element and page source in the same page.
Follow the steps below:
Open debugger or Ctrl+Shift+C
From Right corner press the "customize and control Dev tools" icon, under those option click show console drawer:
Now from the left bottom, click on the quick source option as shown in picture:
All the js files opened in sources will be seen here:
Related
Usually, when I want to test CSS modifications, live, in Chrome, I use:
Right click > Inspect
Use the bottom right pannel, and use the + button to add a new class, and then edit it there.
But I've noticed there's even a handier way: open an "Inspector stylesheet" that opens a blank CSS document, that can be edited, and modifications are displayed live:
Question: what's the easiest/fastest way to open such an "Inspector stylesheet" in Google Chrome?
(by fastest, I mean faster than Right click, Inspect, + add a new class, click on the little inspector stylesheet link, etc.)
I cannot find it in a menu of Chrome's console/developer tools.
Is there a keyboard shortcut that would open such an "Inspector stylesheet"?
I don't have one easy shortcut, but I can get you there a tiny bit faster:
F12 to open DevTools.
button at top of Styles-panel on Elements tab, to create inspector-stylesheet.
Doubleclick to open.
Once inspector-stylesheet is created, and I close it or close DevTools, how to find it again?
If you've closed DevTools when the inspector-stylesheet was still open, just go to the Sources tab directly (in DevTools, topbar) and the inspector-stylesheet should still be open.
If you've closed the inspector-stylesheet itself, then, while on the Sources tab, press Ctrl+P and type "inspector-stylesheet", usually after "in..." you will already see the inspector-stylesheet at the top of the suggestion-list of available files.
And it should also still be visible at the top of the Styles-panel on the Elements tab, where you first created it.
I'm a newbie to learning code and I'm currently doing well learning from resources such as treehouse.
However, I would also like to learn from other developers. I have found a few sites that interest me with their build.
I wondering is there any way to view the source code as it was written.
for example when I view the source code by clicking the right mouse button then view source code it appears all on one line squashed together instead of spreading out making the code hard to read.
Here is an example of what I am talking about;
Example of code squashed together
I wondering whether there is an add-on or plugin that will separate out
the code into easily readable chunks so I can learn from it.
You can paste the code to this website http://jsbeautifier.org/ and 'beautify' it. There are also some addons/extentions mentioned for Chrome browser.
In the dev tools window that pops up if you click the Source tab and click a file on the left then click the curly brackets at the bottom of the code window it puts it into a readable format
Right click an element in the page and select "Inspect" to view the DOM as rendered - this isn't the same as the source code, but may be a better indication as (for modern sites) source may be built up by a combination of raw HTML and JS.
When you're viewing JS or CSS look for a {} icon in the bottom left hand corner of the panel - this will pretty print the JS while still letting you step through it.
You can use this with your CSS too:
Go to http://solid.paris/assets/css/styles.min.1490894140.css
Open the Chrome dev tools (CTRL+SHIFT+I)
Click sources at the top of the tools
Select the CSS from the left hand tree view
Click the {} in the bottom left corner
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:
I'm trying to view the emulation panel but I can't find it anywhere. Everywhere I've looked it says to open an overrides panel to find it but that's missing too. I also can't find any helpful or new answers to my question. Pressing esc only opens up console and there's nothing in settings that seems to help. Can someone please tell me how to reach it?
Instead of emulation in the drawer Device Mode is now offered for emulating other devices. It provides many benefits over the old emulation mode, such as taking into account the meta viewport tag on render. So what you see is much closer to what you'd get in real life.
I'm using 51.0.2704.103 (64-bit) on a Mac.
Cmd-Opt-i to open console.
Click the button with three vertical dots and the very top right of the Developer Tools window.
Select: more tools > sensors:
If the console draw is not already open it will open. Either way there should now be a sensors tab next to the console tab on the console draw. Click this tab and follow your nose from there.
Note that this tab had an x by it. Hitting this will hide the sensors tab and next time you use it you will need to follow the steps above again to reinstate it.
I don't know what I've switched on (by accident) but every time I have the Inspect Element area open and then try to click anything on the webpage not within the Inspect Element area (especially something jQuery related like a slideshow for example) it greys the page, shows a message saying 'Paused in debugger' and then opens a jQuery file within the Sources section of Inspect Element.
Within the 'Call Stack' area, it shows a message saying 'Paused on a "click" Event Listener'.
I don't remember switching this feature on but I'm keen for it to be switched off.
I know this question has been asked before - I thought I'd found the answer when everyone suggested we look to see if the 'Pause' option is switched on (blue). However, it's not switched on, it's grey not blue or any other colour and when I hover over it, it says "Don't pause on exceptions. Click to Pause on all exceptions".
You might also check the Source tab, check under the Event Listener Breakpoints panel if you've set any breakpoints under 'Mouse'.
This can also cause the issue
Break Point icon at top left should be blue like this(For Deactivate BreakPoints)
Should not grey like this
Found solution here, if the little octagonal stop/pause sign (at lower left of Chrome "Sources") is colored (blue or purple), you need to click on it until it's black again.
It did drive me nuts for a short while.....scroll all the way to the bottom of breakpoint window and you'll find XHR Breakpoints & under it there is the Any XHR checkbox...
Goto the sources tab and check all breakpoints.
Go to Elements tab and remove all breakpoints from right pane under DOM Breakpoints
One possible cause, it that you've enabled the "pause on exceptions" (the little stop-sign shaped icon with the pause (||) symbol with in in the lower left of the window). Try clicking that back to the off/grey state (not red nor blue states) and reload the page.
For me, I resolved it by temporarily disabling the Chrome Bitwarden extension.
You could check to see in the Sources tab in the devtools panel to see what is causing this error, it could be an extension.
To open the devtools panel on Chrome, press the F12 key.
For Visual Studio Users, just go Tools>Options>Debugging and make disabled it