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
179
votes
6 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
  • 28,985
  • 26
  • 118
  • 145
177
votes
3 answers

What is the difference between "transferred" and "resources" in Chrome DevTools Network tab?

How these two data amounts, that are located at the bottom of Network Tab differ?
Mantas Lukosevicius
  • 1,914
  • 2
  • 9
  • 13
176
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,955
  • 11
  • 53
  • 65
174
votes
2 answers

How do you inspect websocket traffic with Chrome Developer Tools?

I'm trying to inspect websocket traffic using Chrome Developer Tools. From my research it seems you should be able to see it using the network tab - and it even has a filter for 'ws'. However I've been inspecting sites that I know are using…
Joel Duckworth
  • 5,455
  • 3
  • 20
  • 21
164
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
  • 9,586
  • 6
  • 37
  • 46
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
  • 13,864
  • 7
  • 39
  • 43
152
votes
9 answers

Is there a way to filter network requests using Google Chrome developer tools?

Is it possible to filter out some requests using Chrome developer tools, say, filter out all image requests?
Adam Lee
  • 24,710
  • 51
  • 156
  • 236
149
votes
3 answers

Google Chrome Mobile Emulator: How to show on screen keyboard

I'm debugging a mobile version of our website through Chrome's Mobile Emulation tool, but cannot figure out how to have an on-screen keyboard pop up when selecting a text field. I have clicked on the text box, but no keyboard pops up. If I do this…
Aaron Hellman
  • 1,741
  • 2
  • 14
  • 16
147
votes
3 answers

What is the purpose of this purple dashed line area?

What does this purple area represent?
DonKim
  • 1,551
  • 2
  • 5
  • 11
146
votes
28 answers

How to fix 'Unchecked runtime.lastError: Could not establish connection. Receiving end does not exist.'

I have the following error in the Chrome Dev Tools console on every page-load of my Node/Express/React application: Unchecked runtime.lastError: Could not establish connection. Receiving end does not exist This error makes a reference to…
Emilio
  • 1,814
  • 3
  • 9
  • 11
143
votes
1 answer

What does it mean when Chrome Dev Tools shows a computed property greyed out

Please note, not the Styles panel (I know what greyed-out means in that context—not applied), but the next panel over, the Computed properties panel. What does it mean when a Computed property is shown greyed out? Example:
AmbroseChapel
  • 11,957
  • 7
  • 46
  • 68
143
votes
3 answers

How do you save an entire folder from Google Chrome's Developer Tools' Sources tab?

In Google Chrome's Developer Tools' Sources tabs there is a left side panel which has three tabs with the first one being Sources. Is there a way to download a folder with multiple files and nested folders from this interface? You can right click…
Lokesh Dhakar
  • 5,289
  • 5
  • 22
  • 24
137
votes
2 answers

Disable source maps in Chrome DevTools

Is there a quick way to switch from the jsx code shown in Chrome DevTools to the raw ES5 and back again?
Jack Allan
  • 14,554
  • 11
  • 45
  • 57
137
votes
1 answer

Why {} + {} is NaN only on the client side? Why not in Node.js?

While [] + [] is an empty string, [] + {} is "[object Object]", and {} + [] is 0. Why is {} + {} NaN? > {} + {} NaN My question isn't why ({} + {}).toString() is "[object Object][object Object]" while NaN.toString() is "NaN", this part has an…
Ionică Bizău
  • 109,027
  • 88
  • 289
  • 474
135
votes
2 answers

Is there any way to debug chrome in any IOS device

Is there any way to debug chrome browser on IOS device? If there is no way, how i can approach to bug in chrome on ios? Searched the web and didn't find sufficient answer.
Alexander Gorelik
  • 3,985
  • 6
  • 37
  • 53
1 2 3
…
99 100