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
1778
votes
14 answers

How does Facebook disable the browser's integrated Developer Tools?

So apparently because of the recent scams, the developer tools is exploited by people to post spam and even used to "hack" accounts. Facebook has blocked the developer tools, and I can't even use the console. How did they do that?? One Stack…
Derek 朕會功夫
  • 92,235
  • 44
  • 185
  • 247
1721
votes
34 answers

Disabling Chrome cache for website development

I am modifying a site's appearance (CSS modifications) but can't see the result on Chrome because of annoying persistent cache. I tried Shift+refresh but it doesn't work. How can I disable the cache temporarily or refresh the page in some way that I…
tomermes
  • 22,950
  • 16
  • 43
  • 67
1704
votes
42 answers

How do I debug Node.js applications?

How do I debug a Node.js server application? Right now I'm mostly using alert debugging with print statements like this: sys.puts(sys.inspect(someVariable)); There must be a better way to debug. I know that Google Chrome has a command-line…
Fabian Jakobs
  • 28,815
  • 8
  • 42
  • 39
1311
votes
20 answers

How do I access the $scope variable in browser's console using AngularJS?

I would like to access my $scope variable in Chrome's JavaScript console. How do I do that? I can neither see $scope nor the name of my module myapp in the console as variables.
murtaza52
  • 46,887
  • 28
  • 84
  • 120
1193
votes
30 answers

Colors in JavaScript console

Can Chrome's built-in JavaScript console display colors? I want errors in red, warnings in orange and console.log's in green. Is that possible?
Randomblue
  • 112,777
  • 145
  • 353
  • 547
1091
votes
11 answers

jQuery's jquery-1.10.2.min.map is triggering a 404 (Not Found)

I'm seeing error messages about a file, min.map, being not found: GET jQuery's jquery-1.10.2.min.map is triggering a 404 (Not Found) Screenshot Where is this coming from?
Paul Irish
  • 47,354
  • 22
  • 98
  • 132
963
votes
15 answers

See :hover state in Chrome Developer Tools

I want to see the :hover style for an anchor I'm hovering on in Chrome. In Firebug, there's a style dropdown that allows me to select different states for an element. I can't seem to find anything similar in Chrome. Am I missing something?
Ben
  • 13,160
  • 5
  • 19
  • 12
805
votes
6 answers

How do I view events fired on an element in Chrome DevTools?

I have a customizable form element on a page from a library. I want to see what javascript events are fired when I interact with it because I am trying to find out which event handler to use. How do I do that using Chrome Web Developer?
John Hoffman
  • 17,857
  • 20
  • 58
  • 81
787
votes
11 answers

Using Chrome's Element Inspector in Print Preview Mode?

I am working on developing a website and need to work on the print view. Typically when I have layout issues I use Chrome's Element Inspector. However this does not exist in print preview mode. Is there a Chrome plugin or some other way to change…
David Stinemetze
  • 8,830
  • 3
  • 21
  • 34
612
votes
9 answers

How can I view HTTP headers in Google Chrome?

Till 9.x, the headers were under the resources in the Developer Tools, but now I can't find it anywhere.
user267817
574
votes
12 answers

Freeze screen in chrome debugger / DevTools panel for popover inspection?

I'm using the chrome inspector to try and analyze the z-index of a twitter bootstrap popover, and finding it extremely frustrating... Is there a way to freeze the popover (while shown) so that I can assess and modify the associated CSS? Placing a…
Abram
  • 39,950
  • 26
  • 134
  • 184
508
votes
9 answers

How to reposition Chrome Developer Tools

The tools are opened on the bottom of the chrome window per default. This is a rather bad choice for a wide screen display since there is plenty of empty space to the right but not much vertical space to spare. Unfortunately, I have found no way to…
kostja
  • 60,521
  • 48
  • 179
  • 224
506
votes
22 answers

How to disable JavaScript in Chrome Developer Tools?

I am trying to debug the features of a website when users disable their JavaScript. I was wondering how do you disable JavaScript for a page from the Google Chrome DevTools?
Jopela
  • 5,415
  • 2
  • 18
  • 19
486
votes
4 answers

How to use Chrome's network debugger with redirects

The Chrome network debugger gives me a great view of all the HTTP resources loaded for a page. But it clears the list whenever a new top-level HTML page is loaded. This makes it very difficult to debug pages that automatically reload for one reason…
Leopd
  • 41,333
  • 31
  • 129
  • 167
468
votes
36 answers

"CAUTION: provisional headers are shown" in Chrome debugger

I noticed a strange caution message when looking at downloaded resources using Google chrome inspector (F12): Caution provisional headers are shown I found something possibly relevant, Network Panel: add caution about provisional request headers,…
Salvador Dali
  • 214,103
  • 147
  • 703
  • 753
1
2 3
…
99 100