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? Alexander J. Ray First you have to understand what a Render Layer is. The Render Layer is the browsers representation of how to render that node and how

In Google Chrome's Developer Tools' Sources tabs there is a left side panel which has three tabs with the first one being Sources. Is there a way to download a folder with multiple files and nested folders from this interface? You can right click individual files and 'Save as...' but this is cumbersome. Currently not possible. "Saving whole folders is not currently supported." https://github.com/GoogleChrome/devtools-docs/issues/30#issuecomment-76999063 It's not possible to do directly with Chrome, so I made a batching extension to automatically fetch resources to the Downloads folder. You can

Is it possible to modify the JavaScript of a page and then reload the page without reloading the modified JavaScript file (and thus losing modifications)? This is a bit of a work around, but one way you can achieve this is by adding a breakpoint at the start of the javascript file or block you want to manipulate. Then when you reload, the debugger will pause on that breakpoint, and you can make any changes you want to the source, save the file and then run the debugger through the modified code. But as everyone has said, next reload the changes will be gone - at least it let's you run some

Is there a way to make an HTTP request using the Chrome Developer tools without using a plugin like POSTER? Since the Fetch API is supported by Chrome (and most other browsers), it is now quite easy to make HTTP requests from the devtools console. To GET a JSON file for instance: fetch('https://jsonplaceholder.typicode.com/posts/1') .then(res => res.json()) .then(console.log) Or to POST a new resource: fetch('https://jsonplaceholder.typicode.com/posts', { method: 'POST', body: JSON.stringify({ title: 'foo', body: 'bar', userId: 1 }), headers: { 'Content-type': 'application/json; charset=UTF-8'

Sometimes when I hit a breakpoint in the Chrome Developer Tools, the TypeScript this is actually _this in the JavaScript. I have to manually put _this in the console to see what is actually being used. Is there a way to fix this? the TypeScript this is actually _this in the JavaScript This is due to a bug in the sourcemaps. You can track it here : https://github.com/Microsoft/TypeScript/issues/2859 来源： https://stackoverflow.com/questions/31346989/chrome-typescript-debugging-references-wrong-this