This happens fairly regularly to me, I don't know if I am hitting a special hotkey, but while debugging in Chrome, and switch to the Elements tab, suddenly there will be no elements:
There was the page, now theres nothing, and there are elements because the page view shows the content.
Using Chrome 104
Related
I'm not sure if this is the right location to ask...
I am frequently using Chrome DevTools for debugging. Now I saw that there was a new tab "Lighthouse" and I started to generate a report.
It turned my Webpage into a mobile view. When I close DevTools it resets but every time I restart my Chrome DevTools it automatically turns the Webpage into mobile view.
How do I stop this lighthouse report while still using DevTools?
Although this is about using software (so should probably be on superuser.com) it is an easy one to answer so I will answer then vote to close the question.
In the very top left of the developer tools window you will see two icons. The second icon is for mobile emulation, the one located right next to the "Elements" tab.
On your screen this will be blue as you have it activated, simply click this to remove mobile device emulation.
On Lighthouse itself if you want to test the Desktop version of the site you will see some options before you run the report, you will see "Device" and two radio buttons, just change it to "Desktop"
I'm testing my HTML on accessibility. While navigating the HTML with the TAB key, the focus ring sometimes disappears because the element that has focus is hidden. At that point i can't tell which DOM element has focus.
Is there a way i can track in Chrome DEVtools which element has focus while TABbing through the page?
Update
Official documentation
As of Chrome 70, which released in August 2018, Live Expressions provide an easier way to track which element has focus.
Open the Console.
Click Create Live Expression .
Type document.activeElement.
Click outside of the Live Expression UI to save.
As of Chrome 71, which was released in October 2018, when you hover over a Live Expression result that evaluates to a node (as is the case with document.activeElement), DevTools highlights the node in the viewport.
Original Answer
Thanks for posting. Seems like a common and useful workflow, yet I've never thought about it.
While focused on the hidden element, evaluate document.activeElement in the Console.
Right-click > Reveal in Elements panel.
The DOM Tree is highlighting the hidden element.
Here is the demo, if you'd like to try it yourself.
P.S. I tweeted out this workflow from the DevTools account.
Sometimes when I command the body tag on a page I am inspecting to expand (by clicking with the mouse or using the arrow keys) it does not expand. As you can see in the screen capture the arrow next to the body tag is pointing downwards but no content is showing. I know that there is content in the body tag. The head tag expands just fine.
When this happens problem occurs I have found that a workaround is to open the url in a new tab. When I do that, I can again expand the body tag and enjoy the full power of the Chrome Dev Tools.
This happens very often. During the last week I have found myself having to reopen the page I am inspecting several 10s of times a day.
Anyone know of a way to open Chrome Dev tools to a new window upon open?
I know that I can click F12 and then click the 'customize' button and change orientation or pop out the dev tools window. But that's an extra step, and often a window resize is necessary, and when you do it 50 times a day, it gets to be tedious.
Also, sometimes, on pages I'm testing, pressing F12 will change the layout of the elements on the page and even popping out the dev tools leaves the page layout different than before I opened dev tools. This can make it hard to tell if an element is visible or not, which makes troubleshooting Webdriver more difficult.
Ideally, CTRL+F12 or something to open dev tools as a separate window would be super handy. (to any Chromium devs that might be listening ;) But if anyone has another solution, I'd love to hear it.
If you have your DevTools un-docked, the dock mode, size and position of your DevTools window will remain the same as you previously set it. For example, I just set mine to be maximised on my other monitor. Every time I open up DevTools, it's an un-docked, maximised window, and there's no change to the layout of the inspected window other than the fact it's no longer in focus.
You could alternatively launch Chrome using the --auto-open-devtools-for-tabs flag, which will automatically open DevTools in the dock mode, size and position you had it previously. You can use:
Mac:/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --auto-open-devtools-for-tabs
Windows: "C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --auto-open-devtools-for-tabs
In WebDriver, you can set flags for how Chrome opens. However, after looking into this further, it turns out Chrome currently do not support multiple clients connected to the protocol simultaneously.
As for speeding things up, you can switch between dock positions with Cmd+Shift+D (Mac) or Ctrl+Shift+D (Windows). This toggles between the last two modes you have used, so say you have it docked at the bottom, you then pop it out, using the shortcut now will toggle between the two.
Here's how you do it. On opening the developer tools, with the developer tools window in focus, press F1. This will open a settings page. Check the "Auto-open DevTools for popups".
Originally documented here -- https://newbedev.com/automatically-open-chrome-developer-tools-when-new-tab-new-window-is-opened.
When I have the JavaScript console open in Chrome, I am often unable to use forms, fill in inputs, or click buttons in the browser because Chrome is highlighting HTML elements for me.
Sometimes, it stops, but I don't know what I am doing to make it stop.
Is there a keyboard shortcut or something to make Chrome not highlight HTML elements and let me use the form on the page with the console open?
This irritation can be avoided by using a different keyboard shortcut. cmd+shift+c makes chrome inspect elements on the page, even after you switch to the Javascript console. cmd+option+j opens the console and lets you go on behaving like a user.