My responsive tools are messed up as shown in the picture. Does anyone know how to fix this without resetting everything?
It's not messed up. Looks like you have mistakenly clicked on "Toggle device tool bar". Click on that again and you will be back to normal.
Related
have created a quick test off canvas menu in zurb foundation, works great except: On every other browser, than chrome (both ios and android) tested: (http://prntscr.com/obpii6) it looks like it should.
But in chrome when you "toggle" the "off canvas menu" then the menu opens as it should but then jumps and zooms out (the text becomes way small) http://prntscr.com/obpkjb
Anyone have any clues as to what might cause this? I have never experienced anything like it before.
To anyone else who bump into this, and find this question in a search:
I found out that in chrome on mobile devices you can activate a force zoom activation, this option in the browser settings seemed to be the culprit. The option isn't activated by default.
So if you experience something like this check the following: goto > settings > Accessibility > Force enable zoom option, deaktivate this and see if this helps.
If someone know of a clean way to prevent this strange zoom out via html,css og js, do share :)
What has happened to Google Chrome Developer Console?
My error messages are being minimized so that I can't see them. All I get is a pink line.
I have tried resetting to the default settings.
Once I do this the console is back to normal.
But as soon as I refresh browser page, it's back to the single pink line.
I've tried fiddling around with the filters but this doesn't work either. Also the little filter button is gone now.
Here is my before and after settings once I click the reset button. No difference here that I can tell.
Here is my browser version.
Has anyone else had this happen? It's driving me crazy resetting between every refresh...
Looks like Google fixed this with a browser update. It doesn't behave like before.
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".
I'm porting over a chrome extension to Firefox and need to refactor some of the css and html. I can't figure out a way to inspect the Panel though. Is there a way to do it, or is the only way trial and error?
Currently there is no way to inspect panels as they are. An somewhat-effective workaround could be to open your panel's html file in a tab in Firefox and use the responsive design view to view the panel at the intended size:
https://developer.mozilla.org/en-US/docs/Tools/Responsive_Design_View
This problem is being worked on, here is a somewhat-related bug:
https://bugzilla.mozilla.org/show_bug.cgi?id=950936
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.