google-chrome-devtools

问题 I was looking at chrome dev tools #resource network timing to detect requests that must be improved. In the link before there's a definition for each timing but I don't understand what processes are being taken behind the scenes that are affecting the length of the period. Below are 3 different images and here is my understanding of what's going on, please correct me if I'm wrong. Stalled: Why there are timings where the request get's stalled for 1.17s while others are taking less? Request

问题 Let's say someone wrote a method like this in a file called app.js trying to peform an XHR request angainst a non existing url: app.controller('MainCtrl', function($scope,$http) { $scope.send = function() { $http.get('http://run.plnkr.co/thisIs404'); }; }); I can see an error regarding URL http://run.plnkr.co/thisis404 in console and network panel : To debug this I want to find quickly where this XHR call was made in sources (ie find the app.js file) : So I enable in chrome dev tools : async

问题 Is there any way to disable web socket connections or end a web socket connection through Chrome's developer tools network tab? I've noticed that turning throttling under the network tab to Offline doesn't affect web socket connections that have already been established. It only prevents traditional HTTP requests from going out. There's a question here related to this, but it's woefully outdated. 回答1: No, there is no way to disable or close a connection from the Network panel. Source:

问题 When inspecting a web site, is it possible to disable a particular .css file? I can do it in FireFox but can't find the option in Chrome. 回答1: If you want to remove the style for the remainder of the page session, open the DOM Inspector, locate the <link> or <style> element which links the style sheet, and remove the element. This causes all associated styles to be removed. If you only want to disable the style sheet temporarily, add a new attribute disabled to the <link> / <style> element.

问题 I'd like to self host a chrome extension on my own site but would like the install experience to be the same as on the chrome web store. Specifically, I'd like to have a "add to chrome" button which asks the user to install the extension with one more click. Currently on self hosted extensions you have to confirm the download and then confirm the install. Here's an example of the web store: https://chrome.google.com/webstore/detail/olnconaknblgbkfgknkfmmfhhbebkekd The only reason I'd like to

问题 I can add a folder to the workspace (which doesn't seem to do anything, as far as I can tell), but the "map to file system resource" option seems to have been removed, and I can no longer live-edit css files. Is this a bug, or has the process for mapping css files been changed? This talk (https://developers.google.com/web/updates/2017/10/devtools-release-notes) says that the new version uses "magic" to map remote files to local ones, but I can't seem to get it to work at all. For reference, I

问题 I'm trying to debug quite a complicated module in my angular app. I've set a break point at the start of a particular method hoping I could follow it through and see where it's giving me back an error. However, it keeps bringing me into the VM scripts (VM28337, VM30559, etc). I can assume these all work as they should, so I have no interest in seeing them. I know I can blackbox certain scripts in chrome debugger, but there seems to be an endless amount of these VM scripts. Does anyone have

问题 Right now, while I am debugging backbone or marionette using the chrome dev tools, I end up setting break points and whatnot, but once the code pauses, its hard to tell what type of objects i'm working with because chrome labels everything a "child". (I think because that's the constructor function) Is there any easy way to either change this declaration or determine which type of model/collection i'm using. The amount craziness this causes in me wants to start doing something like this:

问题 How to access the scope variable widgets from chrome's console function MyCntrl($scope) { $scope.widgets = [ {text:'Widget #1', datarow:1, datacol:1, datasizex:3, datasizey:3}, {text:'Widget #2', datarow:2, datacol:1, datasizex:3, datasizey:3}, {text:'Widget #3', datarow:1, datacol:2, datasizex:3, datasizey:3}, {text:'Widget #4', datarow:2, datacol:2, datasizex:3, datasizey:3} ]; Something like $scope.widgets simply doesn't work in the console! 回答1: The scope is bound to the DOM so you need

问题 I know that there's a bunch of questions about the "not allowed by Access-Control-Allow-Origin." error. But I've tried some of them without success. :( Some appointments: I'm trying to build a dev-tools-tab extension I can touch flickr API like the example shows I can't reach localhost Already tried several permission wildcards http://localhost/ http://*/ *://*/ Already tried pack'd and unpack'd extensions currently, manifest.json has "version": "0.0.1", "manifest_version": 2, "devtools_page"