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:

8740 questions
221
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…
Jitendra Vyas
  • 148,487
  • 229
  • 573
  • 852
218
votes
16 answers

Remote Debugging for Chrome iOS (and Safari)

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,784
  • 4
  • 26
  • 33
205
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,567
  • 4
  • 21
  • 22
199
votes
24 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
  • 8,338
  • 14
  • 50
  • 69
195
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,848
  • 3
  • 13
  • 24
195
votes
16 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
  • 143,130
  • 81
  • 406
  • 459
190
votes
7 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
  • 16,281
  • 5
  • 47
  • 60
189
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
  • 21,611
  • 40
  • 152
  • 243
186
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,890
  • 10
  • 31
  • 45
185
votes
12 answers

"Inspect" a hover element?

Note: I've read similar threads, but none quite my issue - I can right click on it fine, it just then disappears. I find 'Inspect Element' an invaluable tool in Chrome, however I'm having trouble using it for sub-menu for an element on my nav bar,…
OJFord
  • 10,522
  • 8
  • 64
  • 98
185
votes
15 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
  • 14,727
  • 19
  • 67
  • 114
184
votes
3 answers

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

What is “(program)” in the function column of the Chrome debugger?
hvgotcodes
  • 118,147
  • 33
  • 203
  • 236
183
votes
29 answers

Inspect hovered element in Chrome?

I am trying to view, through Chrome's developer tools, how tooltips are structured on a site. However, even when I am hovered over the item, when I "inspect element", nothing shows for the tooltip in the html. I know I can set the Style to :hover,…
Skitterm
  • 4,257
  • 7
  • 38
  • 54
182
votes
13 answers

How to export data from Chrome developer tool?

Network analysis by Chrome when page loads I would like to export this data to Microsoft Excel so that I will have a list of similar data when loaded at different times. Loading a page one time doesn't really tell me much especially if I want to…
shebelaw
  • 3,992
  • 6
  • 35
  • 48
182
votes
20 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,727
  • 2
  • 23
  • 29
1 2 3
…
99 100