Save custom device width and height in chrome developer tools - google-chrome

Chrome developer tools in chrome can simulate some device dimensions and even we can set custom width(x) and height(y) for viewport. my question is can we save this custom width or height with custom name or just save it.


In recent versions this is found in...
Developer Tools (CTRL+SHIFT/OPTION+CMD+I)
Settings (F1)
Devices
Add custom device…
As specified in the Device Mode & Mobile Emulation Chrome docs.
Chrome Canary now has this conveniently found under "Edit…" in the 'Responsive' drop-down menu when in 'device mode' (CTRL+SHIFT/OPTION+CMD+M when developer tools are open).


Yes, you can save custom presets. Just click the More overrides button in the top right (represented as three horizontal dots). The emulation drawer should show up in the Dev-tools. You can click Save As button and assign a name to the custom preset. The new preset should then show up in the list of Models.
Check out the official DevTools documentation on this for more detailed steps.
Edit: This seems to have changed in the newer versions of Chrome. matharden's answer includes the correct steps: inside the devtools, go to Settings, select Devices in the left navigation and select Add custom device...


If you bring up the developer tools, click the settings cog in the corner and then select Devices from the left-hand menu, there is an option at the bottom of that page to add a custom device.


At the time I've added this answer, saving screen resolutions seems to have been disabled.
I created a preset (1024x768) whilst it was still possible, and I can still access that preset, but there's no longer a Save option where it did exist (as #Chirag64 described).
There's no mention of 'save' in the docs: https://developer.chrome.com/devtools/docs/device-mode, either :(
I had a quick look around in chrome://flags and my ~/Library/Application Support/Google/Chrome directory, but couldn't find reference to the preference I have saved...

Related

Working With Media Queries In Chrome Dev Tools

I have searched everywhere and the problem might be that what I am looking for does not exist.
I am constantly chasing down media queries when working updating websites. Is there a way to show all media queries for an element?
I know I can change the emulator to a certain device but it does not show me the media queries for that element based on that device size?
I was thinking maybe there is a setting for this but I cannot find it.
How can I easily see all media queries effecting an element I am working with in the DOM using Google Chrome Tools?

You can, just follow this steps:
1- Open chrome web tools,
2- Press the emulator icon,
3- Press the Option button ⋮ in the very top-right of the page (in the black bar under the bookmarks bar),
4- Press "Show media queries",
5- There you can see all media breakpoints,
6- Right-click on the breakpoints that you want and press "Reveal in source code" to see the CSS.
Reference:
https://developers.google.com/web/tools/chrome-devtools/device-mode/emulate-mobile-viewports#media-queries
For a Better explaination:

Google Chrome Viewport Responsive UI option

How to enable the View Port option in Chrome without having any plugin.
I want to see the pixel size and see the responsive UI.
The below article doesn't show where the option is available in Chrome settings.
https://developers.google.com/web/tools/chrome-devtools/iterate/device-mode/emulate-mobile-viewports?hl=en#media-queries
Thanks.

You can do that using developer tools. In that you should click on the "toggle device mode icon" (second from the top).In that you have options to change the viewport according to your needs. Only the interface has changed rest is same.
You can also use the extension "viewport Dimensions" for this.

Chrome Mobile Render tool not rendering dropdowns

When I open Developer tools and turn on device mode, and click any drop down on the page chrome renders options with minimum width and rest of the area as black.
I dont know what is causing this error. I tried to update my graphics card driver, but problem still exists.

After some googling, got to know that this is an issue in Chrome browser itself. Refer the following link for more info - https://bugs.chromium.org/p/chromium/issues/detail?id=553274&q=status%3Aunconfirmed&sort=-id&colspec=ID%20Pri%20M%20Iteration%20ReleaseBlock%20Cr%20Status%20Owner%20Summary%20OS%20Modified&num=1000

Chrome Dev Tools no longer lets me position to bottom

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

Google Chrome disable screen ruler

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.