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:

8740 questions
304
votes
6 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
  • 10,165
  • 18
  • 66
  • 97
299
votes
3 answers

What's the difference between "Request Payload" vs "Form Data" as seen in Chrome dev tools Network tab

I have an old web application I have to support (which I did not write). When I fill out a form and submit then check the "Network" tab in Chrome I see "Request Payload" where I would normally see "Form Data". What is the difference between the two…
red888
  • 27,709
  • 55
  • 204
  • 392
289
votes
16 answers

Chrome dev tools fails to show response even the content returned has header Content-Type:text/html; charset=UTF-8

Why does my Chrome developer tools show Failed to show response data in response when the content returned is of type text/html? What is the alternative to see the returned response in developer tools?
randominstanceOfLivingThing
  • 16,873
  • 13
  • 49
  • 72
286
votes
8 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
  • 13,779
  • 10
  • 69
  • 84
285
votes
5 answers

Google Chromecast sender error if Chromecast extension is not installed or using incognito

I'm having an error running Chromecast sender in Chrome Incognito or if Chromecast extension is not installed: Failed to load resource: net::ERR_ADDRESS_UNREACHABLE chrome-extension://boadgeojelhgndaghljhdicfkmllpafd/cast_sender.js Failed to load…
272
votes
6 answers

Bizarre Error in Chrome Developer Console - Failed to load resource: net::ERR_CACHE_MISS

As far as I can tell, this error was not being thrown yesterday on Chrome, and as of this morning, it is. I have not changed any of my browser settings. I have attached a screenshot (after opening/closing Developer Tools window four times): This…
271
votes
25 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
  • 6,343
  • 7
  • 29
  • 33
271
votes
12 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,649
  • 2
  • 24
  • 26
268
votes
16 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,555
  • 8
  • 45
  • 63
262
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.
  • 20,268
  • 21
  • 102
  • 205
245
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
  • 79,175
  • 10
  • 73
  • 78
244
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…
Frances McMullin
  • 5,516
  • 2
  • 18
  • 19
237
votes
10 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
  • 42,411
  • 75
  • 239
  • 374
230
votes
9 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…
229
votes
7 answers

Understanding Chrome network log "Stalled" state

I've a following network log in chrome: I don't understand one thing in it: what's the difference between filled gray bars and transparent gray bars.
setec
  • 15,506
  • 3
  • 36
  • 51