google-chrome-devtools | 易学教程

How can I dump the entire Web DOM in its current state in Chrome?

阅读更多关于 How can I dump the entire Web DOM in its current state in Chrome?

I want to dump the current DOM to a file and be able to view it offline. Essentially, I have an outdated version of a page that I would like to keep around for comparison. As soon as I close my browser, I'm going to lose it so I would like to save the DOM exactly as it is. There is already an answer for doing this in Firefox but how do I do it in Chrome? Using the Web Inspector (F12), go to the Elements tab, right click on the <html> tag in your code and select 'Copy as HTML'. Then paste that into a new file and save. I am currently using version 53.0.2785.113 m of Chrome. The other answers no

Can the browser turned headless mid-execution when it was started normally, or vice-versa?

阅读更多关于 Can the browser turned headless mid-execution when it was started normally, or vice-versa?

I want to start a chromium browser instant headless, do some automated operations, and then turn it visible before doing the rest of the stuff. Is this possible to do using Puppeteer, and if it is, can you tell me how? And if it is not, is there any other framework or library for browser automation that can do this? So far I've tried the following but it didn't work. const browser = await puppeteer.launch({'headless': false}); browser.headless = true; const page = await browser.newPage(); await page.goto('https://news.ycombinator.com', {waitUntil: 'networkidle2'}); await page.pdf({path: 'hn

Safari/Chrome Developer Tools debug CSS overrides

阅读更多关于 Safari/Chrome Developer Tools debug CSS overrides

问题 Safari/Chrome Developer Tools indicate that a CSS rule is overridden by something else by striking it through, as shown in the image. Sometimes I find myself in a situation where I can not figure out from the CSS files what causes this rule to be ignored. But surely Safari itself must know as it strikes it through. Is there a way to know what overrides such a rule? 回答1: Look at the one which isn't striked out, higher up on the list. Alternatively, view the computed styles . They will be the

How to extract network tab contents of Chrome Developer tools via json

阅读更多关于 How to extract network tab contents of Chrome Developer tools via json

I am trying to extract the network calls of chrome developer tools via selenium webdriver using json, Is there is any other json format available to extract the network size or content-length? You can use the LoggingPreferences to get the Performance logs. It returns the data in json format. Here is a sample java code. Tested this with selenium 2.53, chromedriver 2.20, Chrome 50 on Ubuntu 14.04. This should work on windows also. DesiredCapabilities d = DesiredCapabilities.chrome(); LoggingPreferences logPrefs = new LoggingPreferences(); logPrefs.enable(LogType.PERFORMANCE, Level.ALL); d

Debug Ionic 3 code on the device

阅读更多关于 Debug Ionic 3 code on the device

I am testing Ionic 3, so far everything works as it should. I would wish to debug the TS code on the ionic lab so i added the next configuration in package.json: "config": { "ionic_source_map": "source-map" } After this, i was able to see the code and debug it(in chrome devTools), but when i execute the same test on the phone i am not able to see the .Ts files and debug it. Anyone has any idea which configuration or how to make them also visible on the phone? I also faced with this problem, but solution is simple :) Run command: ionic cordova emulate android -l --debug -l Spin up server to

How to retrieve the Initiator of a request when extending Chrome DevTool?

阅读更多关于 How to retrieve the Initiator of a request when extending Chrome DevTool?

问题 I am writing an extension which needs to know who is responsible when a network request is made. The Initiator from the Network Panel is exactly what I want. But I am not able get it using devtools.network or devtools.panels API. Is it because they simply do not expose that information or I am missing something? 回答1: You are correct in that the initiator is not exposed through devtools extensions API -- currently, the resource properties that the API exposes are limited to that in HAR

How to check if Chrome Dev Tools are opened? [duplicate]

阅读更多关于 How to check if Chrome Dev Tools are opened? [duplicate]

This question already has an answer here: Find out whether Chrome console is open 14 answers I found in the tutorial on codeschool.com (discover-devtools: http://discover-devtools.codeschool.com/chapters/1/challenges/3 ) that there is possibility to check if chrome developer tools are open? How to check it's state/get event of (cmd+alt+i) pressed? Scott Selby google is your friend here function isInspectOpen() { console.profile(); console.profileEnd(); if (console.clear) console.clear(); return console.profiles.length > 0; } from This Question this function will return true is the user has the

How do you detect that a script was loaded and executed in a chrome extension?

阅读更多关于 How do you detect that a script was loaded *and* executed in a chrome extension?

I've been tracking down a bug for days... then I realized the bug was me. :/ I had been using webRequest.onComplete, filtered for scripts. My error was that I made the incorrect association between the scripts being loaded and being executed. The get loaded in a different order than they get executed, and thus the timing of the events is not in the order I need them in. I need to inject between certain scripts so I need an event right after a file has been executed and before the next one. The only solution I can think of at the moment is to alter the JS being loaded before it gets executed.

How to interpret gaps in chrome flame charts

阅读更多关于 How to interpret gaps in chrome flame charts

I'm trying to better understand how to interpret chrome flame charts. In the below chart _changeHandler is shown as four distinct blocks. However I know for fact that it's only being called once. I saw a similar question here, which claims this might be a bug, but that was four years ago: What are this gap mean in Chrome devtools profile flame chart Question: In which case would chrome perf tools show gaps in the flame chart for the same function call ? The real problem is that it really invalidates the entire graph. The bottom of the graph fragments but the top parts are the same function. I

Can the browser turned headless mid-execution when it was started normally, or vice-versa?

阅读更多关于 Can the browser turned headless mid-execution when it was started normally, or vice-versa?

问题 I want to start a chromium browser instant headless, do some automated operations, and then turn it visible before doing the rest of the stuff. Is this possible to do using Puppeteer, and if it is, can you tell me how? And if it is not, is there any other framework or library for browser automation that can do this? So far I've tried the following but it didn't work. const browser = await puppeteer.launch({'headless': false}); browser.headless = true; const page = await browser.newPage();