google-chrome-devtools

How to change color schema on Developer Tools, JavaScript Console in Google Chrome ? Like this: Install a DevTools Theme like Zero Dark Matrix Goto chrome://flags/#enable-devtools-experiments , and enable Developer Tools experiments . Select Relaunch Now at the bottom of the page. F12 to Open developer tools, go to Settings , select Experiments tab, and check Allow custom UI themes . F12 , Reload DevTools. The dark theme is now natively supported in DevTools: https://developers.google.com/web/updates/2016/02/devtools-digest-devtools-go-dark#a_dark_theme_for_devtools micjamking As noted in this

I like docking devtools to the right. I remember how happy I was when I first saw that option when I realized I no longer have to split screen and position windows manually. Recent versions of chrome that option seems to be missing. Even on my installs where I already have devtools on the right the option is removed. Where did it go? If you click and hold on the icon in the top right next to the close icon (Undock into separate window button), you are given the option to dock it to the right. See screenshot: Starting in Chrome 41, you are able to use Ctrl + Shift + D (Windows/Linux) or Command

I'd like to read (not modify) the response body for all requests that match some pattern in a Chrome extension. I'm currently using chrome.devtools.network.onRequestFinished , which gives you a Request object with a getContent() method. This works just fine, but of course requires the devtools to be open for the extension to work. Ideally the extension would be a popup, but chrome.webRequest.onCompleted doesn't seem to give access to the response body. There is a feature request to allow the webRequest API to edit response bodies - but can webRequest even read them? If not, is there any other

We're using Genymotion to test/debug a WebView based Android Application. The device show up in Chrome Dev Tools via Inspect Device, but with no inspection ability. We made different attempts, with/whitout ADB, with/whitout Android Studio but with no luck. What's wrong/missing ? Harsha Vardhan See the official docs on enabling debugging on Android Start up your Virtual Device and, inside the virtual device , enable "USB debugging" by going to Settings > Developer Options > USB Debugging . If you get a prompt that says "always allow USB debugging", press "OK". If you don't see the option for

I use Google Chrome developer tools and I am constantly inspecting one element against another back and forth to find out what may be causing a particular styling issue. It would be nice to compare the differences in style between element 1 and element 2. Can this be done with chrome currently or via some workaround? Is there a tool out there that can do what I am looking for? Current example of style difference is that I have an inline H4 next to a A where the A is appearing higher in vertical alignment. I am not seeking a solution in this question as I will sort it out. Konrad Dzwinel Update

I'm a novice web developer, and I've had Firebug recommended for debugging several times. So far, however, I've just been using Chrome's built-in Developer Tools. It seems to do everything that Firebug does, and is cleaner and more organized as a bonus. As I get more advanced in my debugging, are there features that Firebug has that I'll miss out on with Chrome's DevTools? If so, what are they? Related: Firebug-like debugger for Google Chrome Joseph Lust I used Firebug from the start and it was a godsend like the invention of fire. But then Chrome came out with its debugger and I tried it. I

When I'm viewing the downloaded resources for a page in the Chrome web inspector, I also see the HTML/JS/CSS requested by certain extensions. In the example above, indicator.html , indicator.js and indicator.css are actually part of the Readability Chrome extension , not part of my app. This isn't too big a deal in this particular situation, but on a more complex page and with several extensions installed, it can get quite crowded in there! I was wondering if there was a way to filter out any extension-related resources from this list (i.e. any requests using the chrome-extension:// protocol).

I'm having trouble with searching through JS files in chrome dev-tools, in the past the search activated by Ctrl+shift+f always found what I wanted, but recently (I'm not sure exactly which update triggered this) I'm finding the search does not catch JS in inline script tags JS inside iframes. I've also found the callstack messed up when inline scripts were involved, but when I try to google for these issues, I just get the dev-tools doc pages, has anyone else noticed these issues? Was I just imagining this worked before? jaredwilli Yeah, if you want to search within content sources which are

iOS 6 comes with built-in support for remote debugging ( 1 minute screencast ). It plays nice with the new Safari Web Inspector which seems to be a 1 year old fork of WebKit Inspector. It misses some features such JS editing and WebSocket frames inspection. Safari's Web inspector does use the WebKit remote debugging protocol. However, Safari does not use TCP/HTTP as a transport layer, thus making it incompatible with Chrome. says Timothy Hatcher (aka Xenon), Apple employe What does Safari use for transport layer? Can I make a proxy from this mysterious transport layer to HTTP to make it work