Chrome Developer Tools: Inspect Prettified CSS

Chrome Developer Tools: inspect prettified CSS

In the newer versions there is a "format" button that prettifies the source:

(only just realised myself :P )

Chrome Dev Tools - can I always have pretty print enabled?

No it is not possible yet. The way that I do is that I manage it through the build process to not minify the CSS and JS.

How to reactivate Google Chrome's pretty print?

I'm not sure what panel of DevTools you're looking at. If it's the Sources panel, you can manually enable or disable pretty-printing by clicking Format.

In general, if you see that icon anywhere, clicking it will enable or disable pretty-printing.

Human readable javascripts in chrome developer tools

Some browsers have a Pretty print button that looks like this {} and it appears for HTML, JS, and/or CSS depending on the browser.

Chrome has it in the in the Sources tab:

Firefox has it in the in the Debugger tab

:

The position of these buttons may change, but it should always be in there

Editing Javascript using Chrome Developer Tools

I know this question is stale, but I just had a similar problem and found the solution.

If you have the file prettified, Chrome will not allow edits. I turned it off and was able to edit. Willing to bet this is/was your problem.

See :hover state in Chrome Developer Tools

Now you can see both the pseudo-class rules and force them on elements.

To see the rules like :hover in the Styles pane click the small :hov text in the top right.

To force an element into :hover state, right click it and select :hover.

Additional tips on the elements panel in Chrome Developer Tools Shortcuts.

Editing in the Chrome debugger

You can use the built-in JavaScript debugger in Chrome Developer Tools under the "Scripts" tab (in later versions it's the "Sources" tab), but changes you apply to the code are expressed only at the time when execution passes through them. That means changes to the code that is not running after the page loads will not have an effect. Unlike e.g. changes to the code residing in the mouseover handlers, which you can test on the fly.

There is a video from Google I/O 2010 event introducing other capabilities of Chrome Developer Tools.

Unable to edit javascript in Chrome dev tools

Using chromium / chrome there are several methods to modify the html of an existing document. At devtools

• Select Elements tab, right click on the element to modify, select Edit as HTML , make modifications in frame containing element, then click outside of editor frame

• Select Sources tab, select Snippets tab, right click and select New , write javascript, to execute in existing window press ▶ at right panel to run javascript in Snippets middle panel in existing window. For example if $("body").on("click", function() {alert(123)}) is added as a Snippet clicking body element should call alert(123). The event should also be listed in Event Listeners at right panel of devtools when inspecting element. Removing the listener may be somewhat more challenging; even if you click remove when hovering over the listener at right panel, as the event is already attached to the element. The simplest method would be to add a namespace to the event $("body").on("click.abcnamespace", handler), then call $("body").off("click.abcnamespace")

• Modifying text existing handlers will not automatically affect , or cancel the event handler previously attached to the element. The simplest approach would be to copy and save existing javascript containing event handler, select Elements tab , right click on element that has event listener, select Event Listeners at right panel, when hovering over the window, document or HTMLElement having event attached a button should be displayed that says Remove. Click that button to remove the event listener. You should then be able to modify the saved event listener and add it back to the existing document with modifications being applied

---

Related Topics