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 searched all over and haven't found an answer. I'm developing a Chrome extension and would like to know how to make the popup window stay open if the user chooses to open a link in a new background tab. (For example, clicking on the link while pressing the "ctrl" key.) Currently when I do that, the popup closes even though the user stays on the current tab.
It is different than How to keep Google Chrome Extension popup open?, as that's talking about when the user focuses on a different window, then the popup closes. I'm talking about when the user specifically stays focused on the popup, as in the example given that the user presses "ctrl" while clicking on the link, that the focus stays on current page.
chrome.tabs.create({ url, active: false });
From the docs:
active (boolean, optional): Whether the tab should become the active tab in the window. Does not affect whether the window is focused (see windows.update). Defaults to true.
Ref: https://developer.chrome.com/docs/extensions/reference/tabs/
I'm on Chrome Version 41.0.2272.101 m (newest), and this update is messed up. They put it, when you have inspector open, that any DOM change will flash with purple on the changed element (like in Firefox), but now I cannot inspect any hovered object (also like in FF, which is why I don't like to use it when doing front end developing).
I'm talking about js triggered events, like superfish for instance. Before, I could hover the menu, and cover the menu with the inspector, and the menu would stay opened, and I could go in the inspector see what pseudoelements are created, change the paddings and such directly, and see the change. Now, when I hover the menu, and right click to inspect it, the menu closes, and I cannot inspect it!
I tried dragging the inspector over, but nothing helped. This new 'feature' is annoying as hell. Is there a way to inspect js triggered events, without putting break points on elements (which works, but is kinda pain in the ass)?
Hover over the element with your mouse and press F8 (this will only work in Chrome) to pause the script execution. The hover state will remain in visible to you. If you're on a Mac, you may have to open system preferences and check off "Use all F1,F2,etc" check box (Or simply use fn + F8).
Sometimes it only works if you are in the Sources tab of the inspector.
*Yes, you should be in the source tab and MOST IMPORTANT is you should close all the opened tabs in the Sources tab before you press F8(win) or Fn+F8(mac). *
Depending on the menu element type, I ran into this issue with drop-down input menus. The reason it's disappearing when I inspect it, is because a blur or focusout event is always triggered on the element when I click anywhere outside the element.
One way I was able to inspect the element is to prevent these events from being triggered is by removing their event listeners:
Inspect the input element on Chrome
Go to the Event Listeners tab and remove the blur or focusout event
Once the event listeners are removed, you can open the menu and inspect it without disappearing
In Chrome, press F12 to open the developer console, then click on Settings (cogwheel icon) or press F1:
then find & check the "Emulate a focused page" option.
Update: as noted in comments, this option is now in another place. See this answer.
On Mac, you can press cmd+\ to pause the script after having opened the dropdown. You can then use shift+cmd+c to inspect elements.
Adding to "In Chrome, press F12 to open the developer console, then click on Settings (cogwheel icon) or press F1:" above;
In Chrome 86 and above you can find "Emulate a focused page" option here:
DevTools >> Elements >> "Kebab" menu (3 vertical dots by the settings cog) >> More tools >> Rendering.
Alternately: With Devtools open: Hit CTRL/CMD+SHIFT+P to open the command menu HUD, enter "emulate a fo" to narrow the search results and enter (or click) to toggle the setting.
Now, when I hover the menu, and right click to inspect it, the menu
closes, and I cannot inspect it!
I faced the same issue and what I used was Expand recursively option on chrome dev tools:
The steps are:
Inspect the dropdown field
Find the dynamic DOM (the purple highlight)
Right-mouse click on that dynamic DOM
Choose Expand recursively:
We can see all elements are there
Here is a demo:
In Firefox
In Inspector, right click on a node that contains the dropdown, select:
Break on... > Subtree modification
This will pause execution the moment dropdown is... well... dropped down.
Only way that would work for me was doing setTimeout(() => { debugger }, 3000) in the console and opening the dropdown while timeout was running.
Pressing pause button in dev tools UI or F8 key to pause script execution would both close the menu.
I just used emulate a focused page and it worked like a charm
go to settings
go to more tools
find Rendering
find "emulate a focused page" and click the radio button
voala now you can inspect your select element
You can set an interval that writes out the content of a given element in the JS console every second. Drop this in the console and open the dropdown.
setInterval(() =>
console.log(document.querySelector('.Select-menu-outer').outerHTML),
1000)
None of the above referred remedies worked for me.
As our drop down (React based) will close on any single click (right or left)
So we found out the below workaround:
In Chrome Open developer tools
first click on the drop-down in collapsed state & let it expand with options
then under the element section, right-click on the div node (make sure not to left click before right clicking), which contains details of the drop-down items
Then select option 'Expand Recursively'
Then required details were shown
I think you can use the CSS Editor in Chrome to apply a state, for instance, the state of 'hover'.
In the Developer Tools, you select an element. On the right hand you have a square with an arrow over it. Click that and you can choose a state. For instance, pick hovered and you'll see both your window and your CSS update as if the element is being hovered right now.
On Windows, press F12 first, at the page with the menu, then point your mouse to the element menu (the menu will drop down), then press CTRL + Shift + C. Now you can inspect all the elements.
in my case i do following steps
Open developer tool or inspect page
click three dot button at top right
click on More tools -> Rendering
then check on Emulate a focused page option.
I'm trying to inspect CSS properties from an input into a table cell. The input appears on click and disappears on lost focus, as when I try to inspect it.
How can I do it to don't lost focus while I move to another window (the inspector)?
In Chrome browser, open Developer Tools and select Elements tab, then
open the contextual menu of the parent node of the element you want to inspect, in the contextual menu click on Break on > Subtree modifications.
Afterwards you just need to click on the page and you'll get on the inspector without losing focus or losing the element you want to inspect.
In chrome devtools settings, there is an option named Emulate a focused page which is disabled by default. After enabling this option, if you click anywhere on the devtool window, it wouldn't cause loss of focus on any element in the DOM.
For Chrome version >= 86:
Open devtools and then press Command+Shift+P (Mac) or Control+Shift+P (Windows, Linux) to open the Command Menu. Start typing Rendering in the Command Menu and select Show Rendering. There you can enable Emulate a focused page.
After that, just click on any element to focus, and then click anywhere on the devtool window. You would see that element doesn't lose the focus. So now you can easily inspect or debug.
For Chrome version < 86
Go to devtool settings -> preferences and under Global option, enable Emulate a focused page.
You can capture the disappearing element if you pause JavaScript execution without moving the mouse. You can do so with a keyboard shortcut or by triggering a debugger statement. This works for elements whose appearance is controlled by JavaScript, rather than CSS :hover (if CSS, see Dumba F.'s answer).
Keyboard shortcut
This approach works for pages which don't use JS to trigger special behavior on keypresses. These instructions are for Google Chrome, but can be adapted to other modern browsers:
Open up Developer Tools and go to Sources.
Note the shortcut to pause script execution—F8 (there may also be another shortcut depending on your OS).
Interact with the UI to get the element to appear.
Hit F8.
Now you can move your mouse around, inspect the DOM, whatever. The element will stay there.
debugger statement
To trigger a debugger statement which executes while the hovered element is visible, use setTimeout:
Open the JS console, and enter:
// Pause script execution in 5 seconds
setTimeout(() => { debugger; }, 5000)
Cause the hover to open and wait for the script execution to be paused.
(Same as Nick Farina's answer)
If all else fails, type this in the Console:
setTimeout(() => { debugger; }, 5000)
Then you've got 5 seconds (or change the value to anything else) to make whatever you want to debug appear.
None of the other answers worked for me - the DOM tree kept getting modified (i.e. stuff I care about disappeared) right before the script paused.
Not sure if this works in your situation but normally (and in every case worth to mention in this regard as it is a great tool) in Chrome Developer Tools you can simulate element states and one is also :focus.
To do so go to the Elements tab in the Developer Tools and make sure you are in the Styles section on the right (this should be the default location when you start the Developer Tools). Now just beneth the Styles in the top right corner you have an icon Toggle Element State. When you click it you can simulate :active, :hover, :focus and :visited for the element you selected on the left in your code view.
In Chrome on the developer tools page for the page under test... click the options menu and open settings for preferences... under DevTools enable 'Emulate a focused page'
Then in the test page cause the elements to appear. This worked to keep my popup search results is focused to stay on the screen so I could work with it.
Not a real solution, but it usually works (:
Focus the element
Right click for context menu
Move down to developer tools
I had a very difficult situation and no answer was working from here (I didn't verify the answers changing the container, which is the body for me, or the original event, because I don't know that). I finally found a workaround by breaking via the Control Event Listener Breakpoints in Chrome Inspector. Maybe that is also a cross browser way of breaking for complicated situations where even F8 or right clicking mouse hide the popup again:
Click right of element in chrome devtools ;-)
Paste the following Javascript in the browser developer console:
// Delayed console log of parent element with disappearing child element(s)
// Once code is trigger, you have 3 seconds to trigger the hidden element before it snapshots.
// The hidden elements should appear in the console ready to inspect.
var timer = 3000; //time before snapshot
var parent_of_element_to_inspect = 'div.elementcontainer'; //container of element to snapshot
setTimeout(function(){
console.log(document.querySelector(parent_of_element_to_inspect).cloneNode(true));
},timer);
I have a quicker fix since I'm not very good with using tools, here's what i do.
event.originalEvent.preventDefault();
event.originalEvent.stopImmediatePropagation();
event.originalEvent.stopPropagation();
If you open Chrome DevTools and then trigger the element inspector using keyboard shortcuts, it should solve the problem.
Mac: Cmd+Opt+J and then Cmd+Opt+C
Windows: Ctrl+Shift+J and then Ctrl+Shift+C
[
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: