When I bring up the dev tools in Chrome Canary, it just appears as a black box. I have it set to display in another window rather than overlaying the actual page, but as said, the inside of this window is just black. If I hover the mouse over it, it highlights the elements on the page accordingly.
I have tried: Looking for settings to dock it back into the screen, restarting CC, restarting my computer, reverting to default settings in the CC menu. None of this has changed a thing unfortunately.
EDIT: Has been resolved with update to version 33.0.1707.0
Same thing happened to me, starting sometime in the past two days. I tried everything you did and also tried reinstalling Chrome Canary, no dice. My solution was to dock the developer tools back to the main browser window by clicking in the upper-right corner of the black box, where I think the dock icon usually is.
Related
when open chrome some element getting overlap
like As seen in this picture
I need fix this problem
Even I have faced the same issue.
What I did is I just opened dev tools in separate window.
Click on the 3 dots icon then you can find dock side option, In dock side select the first option which will pop out the dev tools into new window.
In this image you can find the dockside option
This is how the dev tools window will open
Now you can view the entire web page as well as dev tools.
i have a website with alot of popup windows and z-index going on.
Chrome version: 46.0.2490.80 m (never seen in other browser, but cannot omit it)
Everything works fine, but every 50th (not precisely, but very rarely when opening popup or coming back from alt-tab)
Behind all this: my website.
The red: the fullscreen overlay beneath my popup.
The lightGray: my popup window.
The darkgray: popup content.
So for some reason, the corner of my div is cut off. The problem is not connected to this particular popup, or this particular corner.
I have sometimes seen this following an alt-tab into chrome, but not enough to say that's the problem.
I have never seen anything like this, usually it works or breaks, this time its working breaked.
Any clues?
I know this question may not fit well here but this really is driving me crazy for few hours now :( I use chrome to simulate how websites look on different mobile devices. I clicked something wrong that led to a grid with rulers to appear. I don't know WTF to do to disable this grid. This is the screenshot:
I uninstalled and reinstalled the browser and it returns back.
I reset the developer tools to default settings and it's still there.
This is really becoming a nightmare for me for few hours now. I want the regular emulation without these rulers and grid and top bar. Thanks
There is a small blue button on the left of Elements which actually does the magic.
You didn't click anything wrong. Your Chrome updated itself to 38.2125 and the emulator now has those attributes. Further more, the touch function is broken.
To fix the problem, download the "Canary" version of Chrome. You're still required to see the grid, but the screen is improved and easier to see your layout. Also, the touch function is fixed.
Get Chrome Canary here: https://www.google.com/intl/en/chrome/browser/canary.html
That button just enables/disables the emulator. The OP is looking for a way to disable the background grid while emulating mobile devices.
If you're looking to disable the multi-colored grid lines that show up as an overlay, check out the console dock on the bottom of dev tools. There is a tab labeled rendering and try disabling "Show composited layer borders". If you're still seeing the rulers, that setting is in the Settings (gear) of dev tools, there is an option under the Elements heading for "Show rulers".
Google Chrome dev tools no longer lets me re-position it to the bottom of the page instead of the right side. Anyone know how I can re-enable this function? It makes it very difficult to use it in certain screen layouts.
I'm using Chrome v 33.0.1750.154 m
Windows 8.1
Interestingly, the opposite is true in Canary(v 35.0.1900.0 canary). In canary dev tools are stuck on the bottom and can't be re-positioned to the side.
Is there some check-box I accidentally clicked or what??
Currently I can only dock or un-dock the dev tools panel, but the option to change it's position inside the window is gone.
If you click and hold the dock/undock button you get the option to reposition.
Cmd-Shift-D also works, as I just found out
Since the last update of Google Chrome, a screen ruler shows up when inspecting an element. Does anyone know how to disable this ruler?
This is an old question, but now you can enable or disable now in Chrome Developer Tools -> Settings -> Show Rulers (you can also access the settings just pressing F1).
In Chrome 38, there is a "Toggle Device Mode" button to the left of menu items in developer tools. Clicking on it will toggle display of ruler and device emulation list.
Go to "Settings" -> "General" tab.
In the end of page, click on button "Restore defaults and reload".
=)
It's not possible for the moment.
You need to wait Chrome 25 or use Canari.
https://plus.google.com/115203843155141445032/posts/771CKRcKYdM
This is now known as Device Mode. It allows you to select different device screen sizes as well as emulate different Network Speeds.
You can enable/disable it by clicking the Phone Icon on your console.
Upgrading to the latest dev release fixed this for me:
http://www.google.com/chrome/intl/en/eula_dev.html?dl=mac
This started happening to me out of the blue. I use Chrome inspect element for developing, on a personal computer that no one else uses.
This morning, I had the whole rulers-and-menus thing appear as if out of nowhere.
The above suggestions did nothing. When I got to the configuration check-box for rulers, I discovered it was turned off.
I was able to get the old look back by resetting the defaults in the same config menu which held the rulers check-box. Hope that helps anyone stuck like I was.
When you have the unspect editor opened, Just go to settings by clicking the icon (top right on the unspector) there you will find a big button saying restore defaults and reload . That worked for me . Good luck
I'm using Chrome Canary (Version 45.0.2451.0 canary), and the presence of the rulers appears to be tied to whether Emulation is enabled. Restoring defaults (as suggested above) turns it off, or you can just go to the drawer at the bottom and do it.