google-chrome-devtools

问题 My question is about Chrome DevTools, specifically I have question about Timeline tab. So as I've read numerous times, my browser has to have 60fps speed rendering my pixels. Sometimes though it has some heavy JS executing and preventing 60fps happening. Also if I have some CSS and JS which cause recalculating and repainting of the DOM tree(part or full tree) it may also take more than ~16ms for one frame. Here is the picture of such a long frame from our app: Ok, here I can clearly see, that

问题 I've just installed Google Canary on my Mac. I want to have a play with the Experiments in the google developer tools. But I can't for the life of me find where/how to enable them. I specifically want to look at using/editing SASS in the browser. Thanks dave 回答1: Found it In chrome go to chrome://flags and enable it there. Go to chrome://flags . Find Developer Tools Experiments . Enable it. Click Relaunch Now to relaunch Chrome. In the DevTools settings, there's now a new Experiments tab.

问题 My problem is the webapp I am working on is pinging the server at short interval so I have many lines coming in Network tab of Chrome developer tools. First problem: Chrome start to be irresponsive and then crash Second problem: I want to remove all the ping request and have only the request I want to monitor. Is there a way to filter XHR request by name or pattern ? Bonus : same question apply for Firebug In this screenshot I wish to filter our all 'bind' requests. Thanks 回答1: This feature

问题 I am working on a static page that uses React, Gatsby, and styled-components. When styling a page, my development workflow usually heavily involves Chrome DevTools, tweaking styles there until I have something that I like, and then implementing them in the code. When using styled-components, however, all of the styles/rules that appear in DevTools for each rendered element are grey, italicized, and disabled. I can override them by adding styles in element.style {} , but that can be a pain,

问题 I have a large, javascript heavy web app that I am working on. I am experiencing very slow response times from Chrome Dev Tools for XHR responses and console loggging (3-5 secs). The actual app is running fast and responsive, only dev tools looks like it is suffering. Does anyone have any idea why Chrome Dev Tools is becoming sluggish as my app grows? 回答1: Devtools are like any other debugger; they hook into the normal processing flow of an application, and store quite a bit more information

问题 Chrome sources debugging has buttons for step over, step into, and step out. There is no stepping backwards in time to see what were the previous functions. 回答1: You can sort of go backwards if you click through in the "Call Stack" on the right side to see the parent functions. 回答2: As I said on this answer, you can step back by placing a new breakpoint and restarting the actual function. Hope this makes the trick. 回答3: One quick workaround I found out is to make a small change to the source

问题 I have a JavaScript file that I have blackboxed in the Chrome developer tools and I have the debugger set to pause on uncaught exceptions. However, the dev tools continues to pause on uncaught exceptions in the blackboxed JS file (see screenshot below). Is this a Chrome bug? Or is there an additional step required to make Chrome stop pausing on uncaught exceptions in blackboxed scripts? According to https://developer.chrome.com/devtools/docs/blackboxing : What happens when you blackbox a

问题 When analyzing heap snapshots using Chrome devtools, I can't seem to figure out what the colours mean when viewing Detached DOM Trees. What is the difference between red & yellow? 回答1: There is a good explanation available here. From the article: Red nodes do not have direct references from JavaScript to them, but are alive because they’re part of a detached DOM tree. There may be a node in the tree referenced from JavaScript (maybe as a closure or variable) but is coincidentally preventing

问题 Every time I open and close up the cordova app again on my Android phone I see multiple detached webviews in chrome devices. What do these detached webviews mean? Is this like a leak or something? Is there a way to recover the detached webviews? The detached webviews can still be inspected though. 来源： https://stackoverflow.com/questions/28254614/multiple-detached-webview-instances-seen-in-chrome-devices-when-opening-and-clos

问题 I was checking for XHR calls timing in Chrome DevTools to improve slow requests but I found out that 99% of the response time is wasted on content download even though the content size is less than 5 KB and the application is running on localhost(Working on my local machine so no Network issues). But when replaying the call using Replay XHR menu, the Content download period drops dramatically from 2.13 s to 2.11 ms(as shown in the screen shots below). Data is not cached at browser level.