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
1735
votes
13 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 朕會功夫
  • 84,678
  • 41
  • 166
  • 228
1660
votes
33 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
  • 21,672
  • 15
  • 39
  • 61
1639
votes
40 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
  • 27,222
  • 7
  • 38
  • 37
1082
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
  • 43,185
  • 21
  • 92
  • 125
1002
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
  • 98,379
  • 133
  • 328
  • 526
892
votes
12 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
  • 11,249
  • 5
  • 15
  • 12
704
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,000
  • 3
  • 18
  • 34
678
votes
5 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
  • 15,137
  • 19
  • 50
  • 75
572
votes
8 answers

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
498
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
  • 56,537
  • 45
  • 164
  • 213
462
votes
20 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
  • 4,955
  • 2
  • 15
  • 19
445
votes
7 answers

How to search all loaded scripts in Chrome Developer Tools?

In Firebug, you can search some text and it will look for it in all scripts loaded on a page. Can the same be done in Chrome Developer tools while debugging client script? I tried it, but it seems to search only in the script I have open, and not…
Slavo
  • 14,445
  • 10
  • 42
  • 59
436
votes
6 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
  • 34,472
  • 24
  • 121
  • 164
427
votes
35 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
  • 182,715
  • 129
  • 638
  • 708
423
votes
15 answers

How do you launch the JavaScript debugger in Google Chrome?

When using Google Chrome, I want to debug some JavaScript code. How can I do that?
Kevin Driedger
  • 44,076
  • 15
  • 45
  • 55
1
2 3
…
99 100