Questions tagged [google-chrome-devtools]

Chrome DevTools are the web developer tools built into Google Chrome.

Google Chrome DevTools is a set of developer tools included with the Google Chrome browser. It includes inspection, debugging, and profiling capabilities for web pages and web apps.

Chrome Developer Tools features include:

  • Device Mode: emulates various screen sizes
  • Elements Panel: HTML/CSS analysis
  • Console Panel: command line and diagostics
  • Sources Panel: debugger
  • Network Panel: page load performance
  • Performance Panel: runtime performance
  • Memory Panel: memory issues
  • Application Panel: resource monitor
  • Security Panel: security issues

Useful Links:

7716 questions
259
votes
12 answers

Making HTTP Requests using Chrome Developer tools

Is there a way to make an HTTP request using the Chrome Developer tools without using a plugin like POSTER?
leojh
  • 5,542
  • 4
  • 24
  • 30
257
votes
5 answers

How to open the Chrome Developer Tools in a new window?

When I try to use the Chrome Developer Tools, it seems I can no longer view it in a new window. Is this a bug or was that really an intended change in an update? How can we open the Chrome Developer Tools in a new window? Here's a screenshot of what…
Abel Callejo
  • 10,079
  • 7
  • 50
  • 64
253
votes
15 answers

How to force Chrome's script debugger to reload javascript?

I really like the ability to edit javascript in the chrome debugger however, I find that it can be really problematic getting the debugger to re-fetch the JavaScript from the server. Sometimes I have to go as far just closing the debugger and…
Chris Fewtrell
  • 7,007
  • 7
  • 41
  • 59
241
votes
13 answers

Suggestions for debugging print stylesheets?

I've recently been working on a print stylesheet for a website, and I realized that I was at a loss for effective ways to tweak it. It's one thing to have a reload cycle for working on the on-screen layout: change code command-tab reload but that…
Jim Puls
  • 72,152
  • 10
  • 71
  • 78
232
votes
11 answers

How to terminate script execution when debugging in Google Chrome?

When stepping through JavaScript code in Google Chrome debugger, how do I terminate script execution if I do not want to continue? The only way I found is closing the browser window. Pressing "Reload this page" runs the rest of the code and even…
srgstm
  • 3,181
  • 2
  • 21
  • 25
228
votes
22 answers

How can I force a hard reload in Chrome for Android

In Chrome for desktop I have options in the dev tools to disable cache completely when dev tools are opened and I have the options to manually do a hard reload when long clicking on the reload button (with dev tools open). Is there any such…
Riesling
  • 5,693
  • 6
  • 27
  • 30
227
votes
5 answers

Chrome Dev Tools - Modify javascript and reload

Is it possible to modify the JavaScript of a page and then reload the page without reloading the modified JavaScript file (and thus losing modifications)?
CDT
  • 8,269
  • 15
  • 55
  • 89
224
votes
6 answers

Is it possible to open developer tools console in Chrome on Android phone?

An AngularJS application works fine on desktop, but is not rendering properly on mobile (actual code is showing). This is on an Android phone. I would like to see what errors are showing in the console. Is it possible to open JS console on chrome…
tim_xyz
  • 7,219
  • 13
  • 40
  • 77
220
votes
8 answers

How to remove all breakpoints in one step in Google Chrome?

How to remove all breakpoints in one step in Google Chrome? Using version 11. [update] There is now a feature request for this. [update] The feature request is closed (Dec 2011)!
Tony_Henrich
  • 37,447
  • 63
  • 211
  • 355
215
votes
1 answer

Chrome debugging - break on next click event

We have a button. Click events are handled by a 3rd party framework, however, the framework is buggy somehow. We want to debug the framework, however, we don't know where the corresponding event handler code resides to set a breakpoint. How to…
D.R.
  • 17,368
  • 19
  • 70
  • 158
209
votes
17 answers

iOS Remote Debugging

With the recent release of Chrome for iOS, I was wondering how do you enable remote debugging for Chrome iOS? Update: With the release of iOS 6, remote debugging can now be done with Safari.
Hyangelo
  • 4,644
  • 4
  • 22
  • 33
207
votes
7 answers

Accessing console and devtools of extension's background.js

I just started out with Google Chrome extensions and I can't seem to log to console from my background js. When an error occurs (because of a syntax error, for example), I can't find any error messages either. My manifest file: { "name": "My First…
206
votes
11 answers

How to save CSS changes of Styles panel of Chrome Developer Tools?

How to save CSS changes of Styles panel of Google Chrome Developer Tools? At tool's website it's mentioned that we can see all change in resource panel But I'm working locally on a CSS file but changes are not showing in Resource panel for me By…
197
votes
3 answers

Undock Chrome Developer Tools

How do I undock the Chrome Developer Tools in Chrome? Pressing the left bottom corner just moves it to the right side. (source: github.io)
Jeremi Stadler
  • 2,488
  • 3
  • 19
  • 22
194
votes
6 answers

Can I get chrome-devtools to actually search all JS sources?

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…
David McMullin
  • 4,776
  • 2
  • 16
  • 19