I'm trying to set the media query in chrome to go to print. I tried to follow this post - Using Chrome's Element Inspector in Print Preview Mode?
However, I can't find the Emulate CSS media option under overrides.
Has it been moved? Where should I look for it?
I tried in the Emulation in the console drawer. It's not in their either -
They move it every so often. At the moment it's in the Rendering panel. To find it:
Open the lower panel (press Esc while in the Developer Tools)
Open the Rendering panel from the dropdown
Select Emulate print media
For emulating print CSS, it looks like this now, as of Chrome 49, April 2016.
It's under any of the tabs where you can open the console in the dev tools (pretty much all of them except for the Console tab). For example under Sources, go to the upper right hand of the tools and click the Show Console icon (the icon that looks like a greater than sign with three vertical bars). That should open the console and you should see the Emulation options.
Related
Chrome 76 has added support for prefers-color-scheme media query (a.k.a. "dark mode").
But how can I test my webpage in both color schemes easily, without toggling the system dark mode on and off?
Here is the same question for Firefox, but I can't find similar settings in Chrome & Chrome DevTools.
Since Chrome version 79 you can toggle between prefers-color-scheme: dark and prefers-color-scheme: light from the Rendering panel
Open Developer tools (otherwise the key combination below opens the print dialog)
Open the Command Control: Ctrl+Shift+P or Command+Shift+P (Mac)
Type "Show rendering"
Set the Emulate CSS media feature prefers-color-scheme to the value you want to debug
How to emulate/activate prefers-color-scheme on Chrome (Desktop):
Press F12 key (or Command+Shift+C on Mac)
Click on the tree dots symbol (customize and control DevTools)
Point your mouse on the more tools option, and then click in rendering option.
the option Emulate CSS media feature prefers-color-scheme near the end it's your destination !
How to emulate/activate prefers-color-scheme on Chrome (Mobile):
Click on the tree dots symbol.
Click on Settings.
Click on theme.
Select you desired option !
Yay !!!
Edit June/22: If you want force dark colors to any website, you can browse chrome://flags/ and enable the flag: Auto Dark Mode for Web Contents (color inversion based)
This is a Chrome DevTools feature request that is tracked in crbug.com/977243 (star the bug or CC: yourself to be notified of progress). Meanwhile, it's already available in Safari's Web Inspector, see the heading Debugging Dark Mode in Apple's blog post.
As an alternative, if you want to automate the whole process, I have written a Puppeteer script that takes screenshots in dark and light mode, which can also be integrated in your CI testing.
On Chrome for Android, a flag was added in version 73 that adds a settings panel for dark theme, plus a checkbox for it in the browser menu. chrome://flags/#darken-websites-checkbox-in-themes-setting
I understand it may be possible in the "sources" tab, but how about the console tab? I find it supereasy to test stuff there, and quickly aligning / indenting code would be fab. Related answer for the sources tab:
Write JavaScript in Chrome developer tools
There's currently no way to auto-indent a selection of text in the Console.
The Console's built off of CodeMirror though, which does have support for that feature, so it's possible this could get added in the future. CodeMirror's keyboard shortcut for auto-indent is Shift+Tab.
You can post to the mailing list to request the feature.
When using Selenium, I found the Chrome -> Web Developer -Styles window very useful in getting CSS names of web controls.
I could right click on a web control and would get the CSS name for that control. This helped me avoid using XPath.
However, the in-house web application has blocked right click, so I am not able to use that facility any more. However I can still use Firebug to show me the XPath of a control since it works if I click the arrow in Firebug toolbar, which then displays XPath of every control that I hover.
So, the question is - Does Firefox addons have a corresponding CSS identifier tool?
Or
Is there a way around the right click block in Chrome? (For some reason Chrome used to guess or build the CSS name quite accurately which I did not find in Firefox.)
The HTML panel of Firebug has a Styles side panel, where you can get all the applied styles for the selected element.
I hate Firefox, I really do, but as a web developer I'm chained to it b/c of the robust set of tools that Firebug offers. Recently Chrome and Safari's inspection tools allowed users to edit full chunks structural code (in a very buggy manner), but you still can't edit full stylesheets. Usually when someone brings this up, Chrome and Safari developers say "BUT YOU CAN EDIT CSS," and that's true, to an extent. You can edit CSS property-by-property (which takes forever if you have a lot of changes) in both browsers, but there is no way to see the full computed stylesheet, make edits within it, and immediately see the results. To date, only a full install of Firebug on Firefox allows you to do this.
Has there been any momentum in either of the Chrome or Safari camps to build a plugin to match this unparalleled function? Cheap plugins that allow you to insert CSS into the page are not the answer. It's really simple:
Have a list with the current stylesheets that are being referenced
Choose the one you want to edit, and click an edit button
See all the code in the stylesheet
Make changes and see them reflected on the page immediately
Is it really that hard to build something that does this? I think it must be, b/c why else would the developer communities of two browsers completely ignore it? If there's something out there that now offers this capability, I'd love to hear it; otherwise, maybe someone will step up to the plate and develop it for either Chrome or Safari. It seems like the guys who developed the CSS Edit app would be all over this.
Thanks to you I found it!
The Live Stylesheets extension for Chrome is what you are looking for. Be sure to restart Chrome after installation to use it.
You can edit external stylesheets in Chrome DevTools, too (since Chrome 15 or so). Just double-click the stylesheet contents in the Resources panel (or click the "Edit" button below), edit, Ctrl-S to commit a new revision, Esc to cancel editing. And it updates your page as you type!
You can edit your CSS files directly on Chrome without relying on any extension.
Here is how: Edit CSS files on the fly using Chrome DevTools
A different way to access it:
right click the page, select inspect
on the DevTools, click on "Sources"
locate the css on the "Network" pane and click it
change the css and save it ( by pressing ctrl+s )
I'm working on an app that's sort of a bastardization of old and new tech (ASP/ASP.NET). It's all running in IE7. I'd like to be able to right click, View Source and actually see all the html that I'm seeing with my eyes. For example, I have a bit of text in the middle of the page that's in a table. I right click directly on that bit of text and "View Source" and the text isn't in the HTML that I'm looking at. There's no line break or special characters. It's a single piece of text like ABC123. Yet ABC123 isn't in the HTML that I see when I view source.
Is this just something that I'm stuck with? If not, how can I get to the HTML that I want? The app won't run in FF so Firebug is out of the question. I've tried a few developer toolbars for IE but have found them to be flawed at best, not working at worst. It's just very frustrating; I want to make a little change to a style of a TD and I have to go through way too much work just to see if I like it (because of the complex way that the HTML is generated).
When developing in IE I use the IE developers toolbar:
http://www.microsoft.com/en-us/download/details.aspx?id=18359
It will allow you to see rendered HTML on the page, and allow you to drill down and select specific elements that you want to see. There are various highlighting functions, and you can trace styles back to their source.
It's not the be-all and end-all of developer toolbars, but for those times I can't use Firefox / Firebug it does the job over other solutions I have tried
IE7 Pro gives a right click and "View Generated Source" option.
Some ideas:
Firebug Lite
Use IE8 (with its developer tools) in compatibility mode.
MS created a developer toolbar for IE7 (sort of like Web Developer FF extension): http://www.microsoft.com/downloadS/details.aspx?familyid=E59C3964-672D-4511-BB3E-2D5E1DB91038&displaylang=en
Temporarily add a link with an onclick handler to dump document.outerHtml into a <pre>