Super User
Super User

Questions tagged [google-chrome-devtools]

The Google Chrome DevTools is a set of developer tools integrated into Google's Chrome browser. Use this tag for questions related to the usage of Chrome's Developer Tools.

The Google Chrome Developer Tools is a set of developer tools included with the Google Chrome browser. It allows users to inspect the internals of webpages without need of third-party extensions.

Chrome's Developer Tools contains the following features.

  • Live DOM and CSS browser and editor
  • Resource viewer
  • Network inspector
  • JavaScript debugger with breakpoints and console
  • Page load and execution timeline
  • Execution time and memory profiler

Chrome's Developer Tools is actually a web application written with Javascript and CSS. It is heavily based on WebKit's Web Inspector and Firefox's Firebug developer extension.

Useful Links:

168 questions
234
votes
4 answers

Copy JSON from console.log in developer tool to clipboard?

Using Chrome Developer Tools, i have printed a JSON object with console.log. is there a way that I can copy it to the clipboard?
Anagio
  • 3,168
  • 5
  • 24
  • 29
104
votes
6 answers

Google Chrome DevTools failed to parse SourceMap: chrome-extension

I am developing on Rails5 with jQuery. All of a sudden, this afternoon, I started getting these messages in my DevTools console. It happens even running DevTools under StackOverflow. I cleared cache, restarted the browser with no change. …
Richard_G
  • 1,237
85
votes
3 answers

What are the Chrome developer-tools highlight colors?

In past versions of Chrome, the developer tools allowed you to inspect page elements and would highlight them in blue. Recent versions of Chrome highlight elements in blue, but also have green and orange areas as well. What do the colors mean?
Synetech
  • 69,547
67
votes
7 answers

Use the Chrome Devtools Console Filter to hide console errors caused by extensions

I would like to remove all the ERR_BLOCKED_BY_CLIENT errors I get due to AdBlock, so I thought the Filter field would be appripriate but I can't use it to reverse filter. Basically what I want is ... | grep -v ERR_BLOCKED_BY_CLIENT
Dorian
  • 1,579
36
votes
3 answers

Where is the POST tab in Chrome Developer Tools Network?

I’ve recently started using Chrome for development because I’m sick of Firefox’s huge memory footprint. Everything’s going remarkably well, but I just tried to view some posted data in Developer Tools, but I can’t seem to find it. I’m confused; I’m…
Leonard Challis
  • 1,171
36
votes
2 answers

How do I dismiss the "Drop HAR files here" box in Chrome network panel?

My Chrome console's network panel has become unusable today because it keeps getting overlaid with a drag/drop UI for HAR files. How do I dismiss it, or turn this feature off? Never encountered this behavior until today. Thanks.
Kent Rauch
  • 461
29
votes
2 answers

Is there a way to sort the console and network, by time for XHTTP requests in chrome dev tools?

For example in the network panel, we can sort by method, status, type etc etc, in ascending or descending order. Is there a way to sort it such that the latest requests appear at the top for network and console panel, so we don't have to keep…
resting
  • 981
  • 2
  • 14
  • 19
25
votes
2 answers

Why do Chrome's developer tools fail to always collect response data?

I use Google Chrome's Network tab to collect network traces all the time. Roughly 50% of the time it works properly. Why do proxy tools like Charles Proxy and Fiddler successfully collect the data but the Chrome tool is inconsistent? Importantly,…
Berlin Brown
  • 353
25
votes
2 answers

Chrome Dev Tools Color Picker Contrast Ratio not showing up

According to the dev tools docs, you can view the contrast ratio of a text element in the Color Picker as of Chrome 65 - January 2018 However, sometimes the functionality appears buggy, as identified in this thread on Is "Contrast ratio" no longer…
KyleMit
  • 6,865
23
votes
1 answer

Chrome debug tooltip having scrollbars

There seems to be a scrollbar permanently in the tooltip when I hover over variables in Chrome's debug view. This makes debugging very difficult. I have installed the latest Chrome update, but the problem persists: . How can I remove this…
Yahya
  • 333
  • 2
  • 7
16
votes
2 answers

Chrome DevTools - Network - Remove overview time filter

Once you click, and thereby filter, on the network timeline overview, I cannot find a way to undo the filtering. When double clicking, it increases the filter to all, but subsequent requests won't be shown, as the filter is not removed, it is just…
Joseph Pernerstorfer
  • 261
  • 2
  • 5
14
votes
1 answer

How to disable or edit Google Chrome Developer Tools shortcut?

There is a shortcut in the Google Chrome Developer Tools which happen to trigger every times I try to type the [ or ] character in the console. The shortcut in question probably is Alt+[, Alt+^ or [ and it moves the tabs (of the Chrome Developer…
HoLyVieR
  • 243
14
votes
3 answers

What do italics in Chrome devtools elements mean?

I'm looking at the elements in the hamburger menu of this site: https://rainbowedit.com/ using Chrome devtools, and the CSS in Elements is in red italics and uneditable. What does this mean? Is there a way to make them editable?
spongefile
  • 241
13
votes
3 answers

Is there a way to directly open Chrome's “dedicated devtools for node”?

I use Firefox for my daily browsing; so the process of getting a Node inspector running is somewhat annoying: Launch Chrome. Manually visit chrome://inspect, because it refuses to set a builtin page as the ‘homepage’. Click “Open dedicated DevTools…
ELLIOTTCABLE
  • 2,708
12
votes
4 answers

Is there a shortcut for opening the dev tools Network tab in Chrome?

I want to know if there is a shortcut for opening the Network tab in dev tools in Chrome. I know there is a shortcut for opening dev tools and the Console tab, but not for opening the Network tab. Thanks!
EggBender
  • 223
1
2 3
…
11 12