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
4
votes
0 answers

Can we access responses of Ajax calls from Network tab of chrome driver by javascript?

Can we access the responses tab of Network in Chrome Dev Tools. I am trying to access the response of Ajax calls using selenium-python using Chrome Webdriver. I have tried using the performance.getEntries() which returns only the requests made not…
4
votes
2 answers

Analyze a mouse click in perfomance tab of DevTools

I am trying to analyze what happens when I click a button in my web page. After clicking the button, a spinner element will show up. The problem is, there is a short delay between the click and the spinner. And the delay varies. I wish to measure…
Mate Mrše
  • 6,305
  • 6
  • 26
  • 53
4
votes
3 answers

How do I see what JS is changing style to my elements in Chrome dev tools or Firefox dev tools?

My is a noob question as I am just learning JS so I am not good at it yet. I am currently building a website ad added some JS snippets to do few actions. Now my footer has opacity: 0 and it doesn't come from CSS, therefore must come from some JS,…
4
votes
1 answer

Does Firefox have an equivalent to chrome://inspect?

In Chrome you can go to chrome://inspect to go to the debug page. Does Firefox have anything like this?
1.21 gigawatts
  • 12,773
  • 23
  • 85
  • 187
4
votes
0 answers

Chrome dev tools see more precise timing for requests > 1 minute

I'm doing some comparisons of network request timing. Chrome dev tools provides precision to the hundredths decimal place in seconds when the request is less than one minute, but only to the tenths decimal place in minutes for requests greater than…
Scotty H
  • 5,646
  • 3
  • 27
  • 78
4
votes
2 answers

Is it possible to debug node internal modules?

For example, I want to add some breakpoints on the internal file _http_server.js,but the file does not really exist on my disk. What should I do?
4
votes
1 answer

What do these numbers mean on the network tab?

In the network tab, under the list of all the HTTP requests, I see a summary. For example: 213 requests 2.5 MB transferred 7.2 MB resources Finish: 2.1 Min DOMContentLoaded: 1.23 s Load: 3.17 s Chrome's documentation has an extensive article…
p.s.w.g
  • 136,020
  • 27
  • 262
  • 299
4
votes
1 answer

Debugging firestore network requests from chrome dev tools

Using Angular + Google Cloud Firestore, I was hoping to debug a request fired from a form to make sure it wasn't firing too often. When I go to the Network tab in Chrome dev tools, I see a request going through to…
Alex
  • 787
  • 5
  • 20
4
votes
1 answer

How to determine if an element's height or width is set to 100% or `auto` in CSS using vanilla JS?

How can I determine if an element has it's CSS width/height set to 'auto' or '100%' using vanilla JS and cross-browser solution? Using the style property, only returns in-line styles that are set. document.querySelector("#foo").style.height Returns:…
dandan
  • 666
  • 4
  • 13
4
votes
1 answer

DevTools was disconnected from the page(when creating and retrieve node with text content)

I create a simple node: let sp = document.createElement('SPAN'); Then I include some text in it: sp.innerText = 'some text here'; Try to output created element to the console: sp (just type its name in the console) But when I try to output this…
4
votes
2 answers

why the chrome mobile debug mode set a much larger width of the html body rather than the device width?

I have an image element in an html body which width is 440 px and height is 840 px. Everything works as expected until I open the chrome debug mode to simulate it display in mobile device. screenshot with body width As the screenshot shows, the…
Martin Ma
  • 55
  • 6
4
votes
1 answer

Can the browser turned headless mid-execution when it was started normally, or vice-versa?

I want to start a chromium browser instant headless, do some automated operations, and then turn it visible before doing the rest of the stuff. Is this possible to do using Puppeteer, and if it is, can you tell me how? And if it is not, is there…
Sumit Ghosh
  • 609
  • 5
  • 21
4
votes
1 answer

Set video playback rate on Netflix from the google chrome browser console

Netflix doesn't provide control for the playback rate in its user interface. What should I put in the google chrome console to set the playback rate that I want?
4
votes
0 answers

DevTools: referencing a Vue file from multiple sourcemaps

When compiling vue single file components with webpack / vue-loader that contain plain CSS/JS/HTML, i end up with two sourcemaps: bundle.css.map and bundle.js.map (I'm using MiniCssExtractPlugin to separate out the CSS). The JS/CSS sourcemaps both…
Ricky Boyce
  • 1,319
  • 15
  • 23
4
votes
2 answers

Can't set cookie in Chrome Dev tools on localhost

I'm trying to set (change) cookie in Chrome Dev tool, but it only stores the name, not the value. Steps: open page at localhost:3000 open dev tools add new cookie set name set value refresh page Actual result: the cookie with its name is there,…