This is a web site that I can't inspect with Chrome DevTools.
As soon as I open the Devtools the top Header disappear.
Look at the images:
Header visible:
Header gone:
Any idea why?
Website uses responsive layout, where header is expected to disappear if screen width is less then a particular value. When you open devtools - viewport becomes more narrow and responsive layout does its job.
Try to open devtools in a separate window with a special button in top right menu of the devtools panel:
Related
I want to use Chrome to inspect HTML and view the HTML/CSS affecting an element on the page.
This video shows that in Dev Tools Mode you can click the Elements tab and click the Inspect icon (magnifying glass). But that menu is not there.
I'm using chrome: Version 60.0.3112.113 (Official Build) (64-bit)
The icon is now different and can be invoked via Ctrl-Shift-C or in the toolbar, which is on the top of devtools Elements panel.
(answer provided by commentor above)
Is there a setting to change the click behavior in the scrollbar to page up/down instead of jumping to the location in the file? This is the usual scrollbar behavior in almost every other applications except maybe unix applications.
A suggestion could be:
Left click: page up/down
Right click: jump to location
There is a setting for this now:
Editor: Scroll by Page
Controls whether clicks scrolls by page or
jumps to click position.
With that setting enabled, the editor will scroll by one viewport page when clicking anywhere above or below the scrollThumb. With it not enabled (the default) it will scroll to the position in the scroll track where you clicked.
This behavior does not currently exist. I suggest opening a feature request on github.
If, like me, you've been brought to this page despite putting "Visual Studio" into your web search, you can modify this behaviour in the full blown Visual Studio as follows:
Tools > Options > Text Editor > All Languages > Scroll Bars
Under "Behavior", toggle between bar mode and map mode
More information can be found by reading the Microsoft Docs for this feature.
When using the Chrome Dev Tools window detached from the browser window, is it possible to change the layout to be split vertically instead of horizontally?
In the Dev Tool options there is an option to split vertically but it only applies when the Dev Tools window is attached to the right side of the browser window. Doesn't have any effect when the window is detached.
See the screenshot below: Things are too cramped with the horizontally laid out panels. If you could lay them out vertically it would be perfect.
Is this possible?
[UPDATE]
It looks like Panel layout setting is now respected in detached windows (tested in Chrome 55).
Original, outdated, answer below.
This is not an exposed option, but it's possible:
undock DevTools window (A),
focus on that window and hit alt+cmd+J,
this will open another DevTools window (B) - in that window's console execute
WebInspector.panels.elements._splitVertically(true)
close window B
The only issue here is that this change will not "stick". For each DevTools window you'll have to repeat above procedure. However, if you'd like this option to stick and to be exposed in the DevTools settings you can file a feature request on crbug.com.
yes you can. just hold the doc button and you will get the option to view vertically. Or you can use the show windows side by side from the task bar.
I found a custom theme for my chrome web inspector but I need to make some small changes. Where do you find the selectors for the elements in the web inspector?
In the picture below I am trying to make the expand arrow white so you can see it against the background:
DevTools front end is an HTML page, so you can inspect its elements/layout via another instance of devtools. To do so, undock devtools, focus on its window and hit Ctrl-Shift-I (or Cmd-Opt-I on mac).
I am trying to inspect the div element that appears for Tipsy hover-overs on this page in order to change the width of the popup.
https://dl.dropbox.com/u/1531353/Misc/Docudocker/setups/tipsyCrashingApplication/force-html.html
However, when I press Shift+Ctrl+C, and then move my mouse to the Developer Elements panel, the Tipsy hover-over disappears, so I can't examine it any more.
How do I examine an element that only appears upon a hover-over effect in Chrome Web Developer?
I am using Win 7. I used firebug & it showed that tooltips were using the tipsy.css try to navigate to your tipsy css & change the width attrib though i couldnt get the bottom part of the tooltip in right shape. Hope it helps