google-chrome-devtools

问题 I'm building animation/transition heavy web app with a lot of content. There are a lot of composition layers in the app since everything is moved/animated using css transforms. I'm trying to debug the app to find out rendering bottlenecks and I've noticed a lot of "Update Layer Tree" events in Chrome DevTools -> Timeline -> Frames mode like: Does anybody have an idea what could be causing this? What does "Update Layer Tree" exactly stand for? 回答1: First you have to understand what a Render

问题 I'd like to be able to debug an Angular2 application with Visual Studio Code. Here's my environment: OS : Ubuntu 16.10 x64 Browser : Chromium 53.0.2785.143 Node : 6.8.0 Angular-cli : 1.0.0-beta.19-3 Creating a new project with angular-cli : ng new test-VSC-debug cd test-VSC-debug Then I open VSC and load the project : File/open folder I click on the debug logo and I configure launch.json by selecting chrome . It generates the following file : { "version": "0.2.0", "configurations": [ { "name"

问题 I've a following network log in chrome: I don't understand one thing in it: what's the difference between filled gray bars and transparent gray bars. 回答1: Google gives a breakdown of these fields in the Evaluating network performance section of their DevTools documentation. Excerpt from Resource network timing: Stalled/Blocking Time the request spent waiting before it could be sent. This time is inclusive of any time spent in proxy negotiation. Additionally, this time will include when the

问题 I am trying to teach myself the Google Closure javascript library. I am examining the TreeControl UI widget. How can I use Chrome Console to analyze what functions are run when I click on the "Cut" button in the demo below? For instance, can I somehow set a break point for that? I've tried viewing the source and looking around, but I feel that Chrome Console may offer a more systematic method. https://github.com/google/closure-library/blob/master/closure/goog/demos/tree/demo.html 回答1: With

问题 When inspecting a page's DOM, I would like to know the attached event(s) of an element quickly For example, if a button has this HTML DOM <button id="button1">Click Me</button> And somewhere (not in a place that I know in advance) it has an event attached, e.g. $("#button1").click(function(){...}); I know it can be done programatically ( Can I find events bound on an element with jQuery? ) but is there a way using just one of the developer tools for Chrome / Firefox / IE to see a list of

问题 I'm viewing a page that has an inline javascript redirect ( window.location = "/anotherpage" ). I want to load the page in Chrome but have the redirect line disabled, so I can use the page without getting redirected away. Here's what I've tried: Developer tools -> Cog -> General -> Disable JavaScript. Load the page. It doesn't redirect (yay!). But I still want the rest of the page's javascript to run, and it hasn't. Type the URL, then click Developer tools -> Sources -> Pause (F8) real fast!

问题 does anybody know whether Chrome Developer Tools can format javascripts into human readable form ? Some kind of beautifier would be handy. Let say that I'm using some JS library and I need to instantiate its object, so that I should know what to put into constructor. But searching through this huge library that has 4 lines in the Chrome Developer Tools user interface is quite annoying... Otherwise the server side needs to take care of implementing "dev mode" that supplies javascript files

问题 While inspecting an element using Chrome's devtools, in the elements tab, the right-hand side 'Styles' bar shows the corresponding CSS properties. At times, some of these properties are struck-through. What do these properties mean? 回答1: When a CSS property shows as struck-through, it means that the crossed-out style was applied, but then overridden by a more specific selector, a more local rule, or by a later property within the same rule. (Special cases: a style will also be shown as struck

问题 I use some themes for Google Developer Tools from this website: http://devthemez.com/themes/chrome-developer-tools However, after the 32.0.1700.76 m update, all themes have stopped working. What do I need to do to get them working again? 回答1: Support for Custom.css has been removed from Chrome in version 32. This answer provides two methods for easily activating style sheets in the developer tools. The second method is recommended, but only works for Chrome 33+, the first method also works

问题 Check this jsfiddle, and have a look at the console. $$ is not defined. Now, open a completely new window, and enter $$ into a console. It defines a function for getting a (jquery-like) array of all the dom elements which match the selector: > $$ bound: function () { return document.querySelectorAll.apply(document, arguments) } Is this being added by Dev tools? It is also present when using Firebug in Firefox. Is it used internally by the tools themselves? 回答1: Well, Firebug Lite defines this