google-chrome-devtools

问题 I would like to use chrome speech recognition WebKitSpeechRecognition() with the input of an audio file for testing purposes. I could use a virtual microphone but this is really hacky and hard to implement with automation, but when I tested it everything worked fine and the speechrecognition converted my audio file to text. now I wanted to use the following chrome arguments: --use-file-for-fake-audio-capture="C:/url/to/audio.wav" --use-fake-device-for-media-stream --use-fake-ui-for-media

问题 Okay, I'm trying to detect a reason for a slow loading of a website page using network tab in chrome devtools. In my past experience there always were some large files or slow links to 3rd party sources, but now I'm in total confusion because for a large amount of time there is no downloads at all: screenshot of network tab What is also strange is than for a last second there is a file with a size less than 1 kilobyte and it's loading for half of a second, although it's not a main issue here.

问题 In Chrome dev tools, on Network tab, loading HTML page of normal website (e.g. StackOverflow) at first time looks like this: ... if I continue browsing this website, the "Connecting" time is not present anymore, and request to HTML file looks like this: But on a website that I'm working on, the "Connecting" time is present on each page load : In Chrome dev tools documentation "Connecting" status is explained as: "Time it took to establish a connection, including TCP handshakes/retries, DNS

问题 I often have a lot of tabs open in Chrome browser(s) when developing. I always use the Chrome DevTools un-docked, in a separate window. Lets say I have opened DevTools for a given tab, then did some search on SO in another tab... Then if I focus the Chrome DevTools window again, how can I easily find the corresponding browser tab that belongs to this debug window? I do have a solution, but it is not that straight forward: in DevTools, go to tab 'Elements' right-click any element inside the

问题 I have a page that consists of: basic input field lots of heavily styled dom elements Typing in the input field is very slow -- it causes a lot of re-layouting. The Timeline tab in the Chrome Dev Tools indicates that only the input field is redrawn. Removing all the heavy CSS makes the typing much faster -- the layout are much shorter. It makes no sense that: the input field triggers a layout when you type in it that this layout is dependent on other page elements even if the Inspector only

问题 I just noticed in the chrome console a little icon saying "Value below evaluated just now." So I wanted to do a test to see if the console was in fact evaluating object when displayed or when expanded. So I did the following. and I didn't expand the object until I was finished and as you can see it shows 1999 not 2. In many cases, I want to know the state of objects when I log them not after they are manipulated. How can you get the console to show the state of the object as it was when it

问题 Is there some way that I can get stack traces in a browser every time an HTTP request is made? I'm using Chrome dev tools, but I'll use a different tool, if there is one that can do this. I suppose I could monkeypatch XMLHttpRequest to throw an error, but that is a fairly awkward solution. I am trying to determine why an HTTP request was made, and being able to identify a high level function that led to that request would really help. 回答1: If you are using firefox then use Firebug plugin. In

问题 I'm working on a project, and my task is to get an external html table identified by #s_table_0 using the php function file_get_contents($url) . and then manually get CSS and JS related with that Tag. I just can't find any trick in 'google chrome developer tools' to do the magic for me, instead of get all the css file and delete what have no relation with that table, and then hardly try to find the related JS. So,i would like to know if there is any tool or some trick to get only CSS and

问题 Most jQuery code uses anonymous functions, such as: jQuery('someelements').someEvent(function() { // code here }); This works well, but doesn't do so well for debugging. I tried to find the source of some anonymous functions using both Firefox Firebug and Chrome's inspector, with the pause javascript functionality, but the actual code it calls is in the jQuery js file, and stepping through the code never tells what line, or even what .js file added that event. How can I see where the action

问题 Basically, I want to add a breakpoint every time a given closure variable is changed. Is there any way to do this? 回答1: I don't think there's currently a way to directly watch variables, but if you can put the closure variable in an object, then you can use Object.observe() to observe that object for changes. (Object.observe can only observe objects) This requires you to have Experimental Javascript enabled - chrome://flags/#enable-javascript-harmony . (function(){ var holder = {