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

What changes to a component state can I make using React devtools?

I've got a component which consists of an object, which contains an array of objects, which in turn has keys and strings this.state = { dinosaurs: [ { era: "jurassic", name: "diplodocus", diet: "herbivore" }, { era: "cretaceous", name:…
Andrew Grimm
  • 70,470
  • 47
  • 186
  • 310
4
votes
0 answers

Chrome port forwarding not working for https port

I went through this article to setup port forwarding in chrome. Though I was able to work it out for non-secure (http) ports, I couldn't get it working for secure (https) ports. In both cases (http and https) the page loads in my laptop. just the…
Bharat Gupta
  • 2,152
  • 1
  • 16
  • 25
4
votes
1 answer

What is DOM GC event?

I am just trying to understand the chrome Dev tools. I came across the term "DOM GC" in the performance tab. Can someone please explain what it means?
4
votes
1 answer

How to perform right click with Puppeteer?

I'm trying to perform right-click with Puppeteer. I've tried to add the option: await component.click({ button: "right" }) But all I get is a regular click on the component. I followed Puppeteer's API. What am I doing wrong?
4
votes
0 answers

Programmatically accessing [[Scopes]] (closure variables) through Chrome DevTools API or panel? (Not at breakpoint)

In 2014, it was not possible for JS code to access variables inside a closure from outside the closure. Since then, Chrome's internals have changed to use [[Scopes]] instead of Closure. Is it now (2018) possible for Chrome DevTools to read…
cxw
  • 15,429
  • 2
  • 37
  • 69
4
votes
0 answers

Request delay when accessing proxied server from Chrome

I am using Vue.js's API proxying functionality (which internally uses http-proxy-middleware/http-proxy) to forward API requests to my localbackend server. I set it in vue.conf.js like so: module.exports = { devServer: { port: 8081, …
4
votes
4 answers

Push side menu jerky CSS transform transition in Chrome

I have this situation and I am interested to know what can I do, in order to have a smooth menu sliding movement, all the way to the right (at menu-open) and to the left (at menu-close) without that jiggling interrupted-sticky effect at the…
typo_
  • 141
  • 2
  • 14
  • 34
4
votes
2 answers

Chrome DevTools not showing "checked" or "checked="true" attribute in html tag

In the Chrome DevTools, how can you know if a checkbox or radio button is checked. When you click on any of the above, the attribute checked is not showing at all. It's annoying because I have to guess what's happening and it kind make development…
Shaoz
  • 10,223
  • 25
  • 64
  • 98
4
votes
0 answers

Chrome Dev Tools "disconnected from page"

My normal iteration cycle is I make some changes, rebuild my app, and in chrome (with dev tools open) it somehow recognizes that (might be because nodemon restarts on save) and a blue "reload" appears, I tap it and see the updated app. However, once…
Alex Bollbach
  • 3,730
  • 2
  • 25
  • 61
4
votes
1 answer

DevTools console text is cut when zoomed in

Google Chrome Version 67.0.3396.99 (Official Build) (64-bit) I use Google Chrome DevTools to make some screencasts about JavaScript and I'm used to zoom in a lot to make mobile friendly screencasts. Today I zoom in and my text is now cut off at the…
Jérémy
  • 51
  • 4
4
votes
2 answers

Is there a paste function in chrome console?

Chrome provides a copy(myCopyObj) to copy an object. Do we have anything similar in terms of pasting an object or getting the contents from the clipboard?
4
votes
0 answers

Chrome DevTools Terminology

Sorry if I am asking this in the wrong place, but I just don't know where to ask. So I am debugging the node.js code below: var leakyArr = []; var gameLoop = function () { leakyArr.push(function leakyFunc() { return 'BEST FRIENDS!' +…
Ruslan Plastun
  • 1,224
  • 2
  • 9
  • 25
4
votes
1 answer

Debug SSR node.js server side VSCode

I've lost too many hours trying to debug an SSR react application (the server side). We're building an app from scratch, and it's a very large project so debug the code is really important. The webpack config for the server is the following: const…
4
votes
2 answers

jekyll + service worker failure : service worker does not successfully serve the manifest's start_url

can't set up the service worker for jekyll-powered project site, Lighthouse refusing start_url value and giving an error Unable to fetch start URL via service worker app->manifest output shows root / tried ./index.html as well - same results. is…
4
votes
1 answer

Puppeteer performance timeline?

Is there a way to record a performance timeline for tests run with Puppeteer?
Atav32
  • 1,488
  • 3
  • 23
  • 30
1 2 3
99
100