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.
Related
I'm building my first application using CSS Grids.
Using Firefox's DevTools, I'm able to to highlight the Grid's tracks by clicking "# grid" next to an element in the "Rules" pane :
But when I click the "Layout" pane, it always shows "CSS Grid is not in use on this page":
Why is that?
(I'm using the latest Firefox version available today, "62.0.2")
UPDATE: Here's an example project.
UPDATE 2: It does work when I create a new, fresh, profile! But it doesn't work with my current profile, even when I start in safe mode, with all add-ons disabled... I guess I'll customize a new profile!
I agree with you indeed this is a bug in Firefox, I'm using the latest version of developer edition 85.0b9, I faced the same issue. You can clearly see, I've display as Grid still it says CSS Grid not in use on this page.
Issue - It happens when you open it in the default or the 1st Tab, it's not setting some tab-value there. The bug is still not fixed by Bugzilla's dev team, open from past 2 years. Let's hope they fix in future.
Issue Link - https://bugzilla.mozilla.org/show_bug.cgi?id=1492370
Solution - Just duplicate your tab, it'll work like a charm.
Today I learned about Google Chrome's ability to set up workspaces and map them to your local resources. This works perfectly in the Sources tab, but I'd like to be able to edit the css in the Elements > Styles tab so that I can see the changes as I make them. Otherwise I might as well just copy them into my editor since I have to reload the page to see the changes.
Is it possible to save changes from the Elements tab? I'd like the functionality similar to Chrome DevTools Autosave if it is built into Chrome already.
This is the same question as Chrome Workspaces - Saves changes in Sources tab but not Elements, but none of the solutions work for me.
The new, experimental Workspaces 2.0 handles it the way you're looking for.
Download Chrome Canary.
Enable DevTools Experiments.
Open DevTools.
Open Command Menu.
Type Settings and press Enter.
Go to Experiments tab.
Enable Persistence 2.0.
Restart Chrome.
Add folder to workspace
Map to File System Resource…
Change the styles in Elements Tab, after that enter Tab or enter
After these steps, all your change are in your local mapped files.
How can I get the fields logical names of webpage to be tested so that I can write script in Robot Framework.I understand we use key words to check/validate the controls (input, out and images etc) as required. I am come from manual testing background so obviously need to know how does it all work in Robot Framework.
Every browser has developer tools which you can use to inspect the page. For example, on chrome and firefox you can press Control-Shift-I to open the developer tools window. On IE I think it's F12. From there you can inspect the elements that make up the page.
You can also simply ask the members of your development team to help you.
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.
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 )