This is reproducible both to Chrome 96.0.4664.45 and Edge 96.0.1054.62..,
I see something like this:
,
although I expected something like this
Related
A few weeks ago I remember visited this website https://stitches.dev/ and I be watch in the network tab in dev tools specifically the document and I was able to see all the colors and styles applied correctly to the website but now I'm not able to see this same experience again now i just see like this, also know this website uses SSR so that's the question about why happen this, maybe is a misconfiguration on my browser or what's the reasson, I be tried hard reset in devtools but nothings seems to help me?
I be visited in another computer and the page looks like this
Img that i want to be able to see in my computer |
Link of how the documents looks when i visited the network tab in devtools
I'm working for a project which run by chrome headless driver puppeteer, And i recently found a website (https://chrome.browserless.io/) could show puppeteer process in browser. This website appended an chrome devtoll which looks like magic.
i try to figure out how did work, and i found that this website inject a chrome devtool iframe, and the url usually like below:
https://chrome-devtools-frontend.appspot.com/serve_file/#7f3cdc3f76faecc6425814688e3b2b71bf1630a4/inspector.html?wss=chrome.browserless.io/devtools/page/(4BDC5841A823B95BF9B6107801819A31)&remoteFrontend=true
i think the version after inspector.html refer for the puppeteer code, but i don't know how this work.
i think this is some method imply over DevTools Protocol. I search the document but found nothing about how to put chrome devtool iframe in browser.
Does anyone know how to do this? or any document about this?
The Browserless Chrome Debugger you mentioned in your question has an instance of CodeMirror text editor embedded in the left hand section.
In the right hand section, an iframe element exists to display the result of the code you executed.
Simply put, you can simulate this type of behavior and allow users to execute Puppeteer code directly from your website by following a series of steps:
Sandbox a section of your system with a system container manager, such as LXD.
Install Node.js, NPM, and Puppeteer.
Install a web-based code editor, like CodeMirror, and embed it into a web page.
Validate and send an AJAX request with the code from the text editor to your sandbox server.
Sanitize the code, and then pass the code to Puppeteer.
Return the result to your callback function in your AJAX request on the client-side.
Format and sanitize the result before displaying it in an iframe.
Note: This is a naive implantation of this concept intended to explain the bare necessities of what would be required to obtain the goal in the question.
Make sure that you follow all generally recommended security practices.
All of the Google Chrome Console documentation pages (and numerous SO answers) show a checkbox labeled "Regex" next to the filter when the filter bar is expanded, e.g., from the Command Line API Reference:
I use it so much that I have macros set up to paste various Regexes into it, so I'm positive I am not crazy and that it existed until very recently. I am using Google Chrome Version 57.0.2987.21 beta (64-bit) on Mac OS X, and it's no longer there:
Is it gone, have I done something inadvertent to hide it, or what?
Update: This might be a bug in the Beta channel: DevTools: [regression] isRegex checkbox is missing on Network and Console filter bars
In Chrome 58+ to enter a regex simply enclose the text in /, this trick is used in some applications:
/\w+::\S/
the approved answer didn't work for me. My version is 80+. I finally figured out that clicking on search opens the interface to search with regex.
I didn't like the search results page though.
For those who dont know what firediff is, its a firefox plugin that integrates into firebug to allow you to track all dom changes.
http://www.incaseofstairs.com/firediff/ and
https://addons.mozilla.org/en-US/firefox/addon/firediff/
However, I dont overly like debugging in firefox, and much prefer Chrome.
Is there however an alternative to this as an extension that works from your browser and not from within a plugin like watch.js
I tried googling "Dom Change Chrome Extention" and "Monitoring DOM Changes in Chrome" and such but they all require to add javascript plugins to your websites. However I'd like an extension to work across everything, just like firediff
Was wondering the same thing and found the answer here:
Export CSS changes from inspector (webkit, firebug, etc)
Apparently Chrome already contains this functionality built-in.
I made a Chrome extension that does exactly this for CSS. It doesn't track HTML changes though, other than for style tags and inline styles.
It's called StyleURL - it diffs CSS changes you make in Chrome Inspector and outputs valid CSS: https://chrome.google.com/webstore/detail/styleurl/emplcligcppnlalfjknjbanolhlnkmgp
Here's an example where I added padding-bottom: 50px to Stack Overflow:
It's open-source and on GitHub too: https://github.com/Jarred-Sumner/styleurl-extension
I would like to know how the Chrome plugin "iReader" works. I would like to know what is the magic behind the detect the web page is enable "reader".Moreover, I would like to know how it extract the content of blog post. How can I inspect it?
Most Chrome plugins are open source so you can download them from the project's homepage. Besides, you can also open the Chrome Developer Tools and switch to script tag. There should be some scripts named "chrome-extension://".
The arbitrary string behind the "chrome-extension://" is the ID of the plugin. If you're using Windows Vista and above, refer to "C:\Users\${YOU USER NAME}\AppData\Local\Google\Chrome\User Data\Default\Extensions" to find out the ID of the "iReader".