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:
Related
I am using Wordpress with a responsive theme. When I display the content on a mobile device the theme is displayed properly with a regular browser.
When switching into the broswers 'Desktop mode' the responsive theme behaves little bit strange. I guess this is due to the used screensize. Is there a way to display the used CSS media query?
In sense of when CSS says media min-width: 1024px can I see somewhere which screensize CSS is using? Or does there exist a simple page where to test it?
Or even better: How to detect if the browser request a 'Desktop version' of a site and use it for CSS?
I Googled but didn't find any help how to detect it but didn't come up with helpful hints.
window.innerWidth is what you're looking for. Plug it into your dev console and you'll get the exact width after scaling in pixels.
You can use the inspector-tab from the developer tools inside the browsers to view the css-rules an element currently uses.
You can also see and set the size of the browser viewport with the help of the developer tools. Most browsers have a set of presets to simulate specific mobile-screens. This is very helpful for testing and debuging responsive rules/styles.
In styles panel of dev-tool you can search for it.
You can also use show-hide media-queries option.
Is there a way to display the used CSS media query?
I think what you're looking for can be found in your browser's dev tools. In the screenshot below, I tried resizing this exact same page and inspect it using Chrome dev tools. Under elements tab and styles you can see if your media query is being triggered. Please see the screenshot below...
can I see somewhere which screensize CSS is using?
Your browser dev tool will most likely have a feature that displays the current size of your browser window. In the case of Google Chrome, you can see the current size of your browser at the top right corner of your screen while you resize. Please note that the size will only display if the dev tools is currently open and you're resizing the window. Please see the screenshot below...
P.S.
ADDITIONAL:
If you want to have more like a javascript solution, you might want to check out this library. https://github.com/ryanve/actual
Based on the description, it "Determine actual CSS media query breakpoints via JavaScript". Please note that I have not personally used the library myself so I can't really say that it works.
You might also want to check this article that discusses how to detect a media query using Javascript - http://zerosixthree.se/detecting-media-queries-with-javascript/
Hope this helps! :D
the easiest solution is to use 'Window Resizer' (2.6.4) chrome extension
it will give you a popup window that will allow you to resize the view port to any of the standard sizes (xs, sm, md, lg etc.)
open the website in your computer browser and reduce the size of the browser like this example and right click on the center of the page and click inspect then you will be able to see all css style of the website when the website is small
The documentation for Google Chrome Emulator at https://developer.chrome.com/devtools/docs/device-mode says,
"To view the media query inspector, click the Media queries media queries icon icon in the upper left corner of the viewport. The DevTools detect media queries in your stylesheets and display them as colored bars in the top ruler."
I have clicked on the icon and notice that it is active. However, no colored bars appear anywhere.
Chrome tells me that my version, Version 38.0.2125.122, is up-to-date. The rest of the emulator seems to work OK. The colored bars documented would be REALLY helpful, so I would be extremely grateful if someone could complete or correct Google's instructions.
What would be really terrific is if the emulator could display the file name of the external .css document, as I have a mediaqueries.css document that points (that's the object anyway) to various .css external style sheets. Based on what I'm seeing under the "Elements" tab in the "dock"? (Google doesn't seem to have a name for the window), it looks like some of the tests, e.g, "Apple iPhone 3GS" or "Apple iPhone 5", etc., are picking up styles from different style sheets. I didn't know that was possible.
I believe this is the area they're talking about. You should see this in emulator mode.
Once you click the emulator icon, this appears at the top of the browser viewport (not at the bottom where the dev tools are.
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...
I have a project to do and I am desperate for a site that would show me how a mobile website would look with the code I have. The problem is i don't have a website url that I can use it on that will show the images provided with it.
Thanks,
Adam
You can use emulation feature of Google Chrome. Open your web page and hit Ctrl+Shift+J to open dev tools. There, click on a "drawer" icon (third from the right) - it will open the drawer panel. There, use "Emulation" tab - it will allow you to select from different various devices. Chrome will emulate screen resolution, input, and User Agent string.
Take the page on your desktop and resize the window to resemble the size of a mobile device. Pretty much you are making the window the same pixel size of a mobile phone's browser.
As far as the pictures go, you would need a url. You may be able to use this
http://jsfiddle.net/
In firefox you can use the responsive design layout using the command " ctrl+shif+m " .
This comes configured with default ranges for devices.
You can also install "web developer tool" in firefox and chrome . It has a "resize" tool that will show your page in mobile and tablet views also .
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.