Stack Overflow
Stack Overflow

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
188
votes
5 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
  • 13,254
  • 3
  • 30
  • 49
183
votes
12 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
  • 11,543
  • 11
  • 40
  • 66
183
votes
3 answers

What is “(program)” in Chrome debugger’s profiler?

What is “(program)” in the function column of the Chrome debugger?
hvgotcodes
  • 109,621
  • 25
  • 195
  • 231
175
votes
5 answers

Why does Chrome debugger think closed local variable is undefined?

With this code: function baz() { var x = "foo"; function bar() { debugger; }; bar(); } baz(); I get this unexpected result: When I change the code: function baz() { var x = "foo"; function bar() { x; debugger; }; …
Gabe Kopley
  • 15,109
  • 5
  • 43
  • 59
165
votes
19 answers

Find out whether Chrome console is open

I am using this little script to find out whether Firebug is open: if (window.console && window.console.firebug) { //is open }; And it works well. Now I was searching for half an hour to find a way to detect whether Google Chrome's built-in web…
r0skar
  • 7,059
  • 11
  • 47
  • 68
161
votes
2 answers

Google Chrome Developer Tools - disable black emulation options ruler

In Google Chrome version 38+, there's a new black ruler with Device emulation options. Does anyone know how to disable this?
Jeremy Moritz
  • 10,834
  • 6
  • 30
  • 37
161
votes
1 answer

HTML Body shows cz-shortcut-listen="true" with Chrome's Developer Tools?

I was testing some HTML code I'm making, and while using the Developer Tools on Google Chrome version 22.0.1229.94 m, I saw the tag has the attribute cz-shortcut-listen="true" (which of course is not on my code). What does it mean and why is…
DarkAjax
  • 15,175
  • 11
  • 52
  • 65
158
votes
4 answers

Is it possible to hide extension resources in the Chrome web inspector network tab?

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…
Mark Bell
  • 27,184
  • 22
  • 109
  • 138
158
votes
14 answers

Is there a way to auto expand objects in Chrome Dev Tools?

EVERY SINGLE TIME I view an object in the console I am going to want to expand it, so it gets tiresome to have to click the arrow to do this EVERY SINGLE TIME :) Is there a shortcut or setting to have this done automatically?
Jeremy Smith
  • 13,617
  • 17
  • 64
  • 112
153
votes
9 answers

Chrome Development Tool: [VM] file from javascript

I added a breakpoint in my javascript file (jaydata.js) and was pressing "Step over to the next function call." When it got to a line that was: }, another file titled "[VM] (8312)" popped up. I kept clicking "Step over to the next function call"…
AllieCat
  • 3,430
  • 8
  • 29
  • 45
145
votes
17 answers

Paused in debugger in chrome?

When debugging in chrome, the scripts are always paused in the debugger even if there are no break points set, and if the the pause is un-paused, it again pauses itself. What can be done?
Luja Shrestha
  • 2,325
  • 2
  • 18
  • 27
144
votes
6 answers

Chrome developer tools: View Console and Sources views in separate views/vertically tiled?

Chrome developer tools: Is there a way to view the Console tab and the Sources tab in separate views? I often want to look at both of these simultaneously. Pressing Esc when on the Sources tab will let me see a small view of the Console at the…
Himanshu P
  • 8,305
  • 5
  • 35
  • 45
143
votes
3 answers

Human readable javascripts in chrome developer tools

does anybody know whether Chrome Developer Tools can format javascripts into human readable form ? Some kind of beautifier would be handy. Let say that I'm using some JS library and I need to instantiate its object, so that I should know what to put…
lisak
  • 20,109
  • 39
  • 146
  • 236
141
votes
2 answers

How to filter (hide) Pre-flight requests on my Dev Tools Network

Normally both calls are shown, the pre-flight and the actual request. This is sometimes annoying. Is there a way to hide the pre-flights requests ? Or is there a plugin to filter certain requests based on headers ?
John Smith
  • 1,861
  • 3
  • 11
  • 14
141
votes
12 answers

How can I view network requests (for debugging) in React Native?

I'd like to view my network requests in React Native to help me debug - ideally in the 'Network' tab of Chrome's devtools. There are some closed issues about this on GitHub (https://github.com/facebook/react-native/issues/4122 and…
Mark Amery
  • 110,735
  • 57
  • 354
  • 402
1 2 3
…
99 100