How to Edit CSS in Chrome Like in Firebug for Firefox

How do I edit CSS in Chrome like in Firebug for Firefox?

Try StyleBot. It can also save edited CSS.

Chrome equivalent of Firefox Firebug CSS select path

There is no native way to get this information in Chrome. You can do a bunch of hacks, using jQuery and bookmarks as show here: http://www.edmondscommerce.co.uk/chrome/tip-copy-css-selector-in-chrome/ as well as here: http://www.selectorgadget.com/

However, you may find this extension to be closer to what you want, and a little easier to use: https://chrome.google.com/webstore/detail/lbghbpofdlcecfbpjgmffnkieenjkboi
It will pull the XPath as well as the CSS Path, and allow you to easily copy the text.

Force Chrome/Firefox developer tools to render edits more immediately like Firebug

In the Firefox DevTools there is currently no way to let their Inspector do the updates immediately. Though there's already bug 815464 filed to change this behavior.

A better workflow for them is to hit Enter after you've edited the value. Then you can open the editor again by pressing Space. Doing so you don't lose the focus.

The Chrome DevTools don't offer a way to do live updates when changing the HTML, neither. Because I couldn't find a related issue to improve the behavior, I requested this in issue 546883.

Their Elements panel allows a similar workflow as the Firefox DevTools' Inspector panel. There you can start and stop inline editing by pressing Enter or use the bigger HTML editor by pressing F2 and stop editing via Ctrl+Enter. Unfortunately Chrome's Elements panel does not focus the part you edited, so you either always start at the first attribute or you edit the whole element.

How to filter and show only applied CSS in Chrome Developer Tools (like Firebug in Firefox)

In the Chrome dev tools, in the right hand column (where CSS is shown in the Elements panel), the first section is called "Computed Style". If you deselect "show inherited", you get a neat list of the styles that actually apply to the element. Does that help?

Why can't I save CSS changes in Firebug?

I got here looking exactly for this feature, that is, being able to save edited CSS properties back to the original file (on my local development machine). Unfortunately after searching a lot and not finding anything that suits my needs (OK, there's CSS Updater but you have to register and it's a paid extension...) I gave up on Firefox + Firebug and looked for something similar for Google Chrome. Guess what... I just found this great post that shows a nice way of getting this to work ( built into Chrome - there's no need for additional extensions ):

Change CSS and SAVE on local file system using Chrome Developer Tools

Sample Image

I tried it now and it works great highlighting the changed lines. Just click Save and you're done! :)

Here's a video explaining this and much more: Google I/O 2011: Chrome Dev Tools Reloaded

I hope it helps if it doesn't matter to you changing browser while editing your CSS files. I made the change already for now, but I would really love to have this functionality built into Firebug. :)

[Update 1]

Today I just saw this video: Firefox CSS live edit in Sublimetext (work in progress) Looks promising indeed.

[Update 2]

If you happen to be using Visual Studio 2013 with Web Essentials you'll be able to sync CSS automagically as shown in this video:

Web Essentials: Browser tools integration

How can I edit javascript in my browser like I can use Firebug to edit CSS/HTML?

The problem with editing JavaScript like you can CSS and HTML is that there is no clean way to propagate the changes. JavaScript can modify the DOM, send Ajax requests, and dynamically modify existing objects and functions at runtime. So, once you have loaded a page with JavaScript, it might be completely different after the JavaScript has run. The browser would have to keep track of every modification your JavaScript code performs so that when you edit the JS, it rolls back the changes to a clean page.

But, you can modify JavaScript dynamically in a few other ways:

JavaScript injections in the URL bar: javascript: alert (1);
Via a JavaScript console (there's one built into Firefox, Chrome, and newer versions of IE)
If you want to modify the JavaScript files as they are served to your browser (i.e. grabbing them in transit and modifying them), then I can't offer much help. I would suggest using a debugging proxy like Fiddler

The first two options are great because you can modify any JavaScript variables and functions currently in scope. However, you won't be able to modify the code and run it with a "just-served" page, like you can with the third option.

Other than that, as far as I know, there is no edit-and-run JavaScript editor in the browser. Hope this helps,

Firebug-like debugger for Google Chrome

There is a Firebug-like tool already built into Chrome. Just right click anywhere on a page and choose "Inspect element" from the menu. Chrome has a graphical tool for debugging (like in Firebug), so you can debug JavaScript. It also does CSS inspection well and can even change CSS rendering on the fly.

For more information, see https://developers.google.com/chrome-developer-tools/