Menu
While using Puppeteer or Chrome DevTools APIs, you can get a value for resourceType (on Request object in Puppeteer and on Page object in Chrome DevTools).
How does this value is establish by the "rendering engine" (as called in the documentation)?
Possible values being: Document, Stylesheet, Image, Media, Font, Script, TextTrack, XHR, Fetch, EventSource, WebSocket, Manifest, Other
API documentation: Puppeteer API and Chrome DevTools API
Similar question on stackoverflow: Is There any way to get all mime type by the resourceType of chrome
718
The Chrome DevTools Protocol provides APIs to instrument, inspect, debug, and profile Chromium-based browsers. The Chrome DevTools Protocol is the foundation for the Microsoft Edge DevTools. Use the Chrome DevTools Protocol for features that aren't implemented in the WebView2 platform.
To enable the experiment, check the Protocol Monitor checkbox under Settings > Experiments. Chrome DevTools uses the Chrome DevTools Protocol (CDP) to instrument, inspect, debug and profile Chrome browsers. The Protocol monitor provides you a way to view all the CDP requests and responses made by DevTools.
Open Developer tools ( Ctrl + Shift + I or Settings Icon at the top-right of your browser window => Tools => Developer tools ) on the needed page, switch to the Network tab and reload page. In the Size column you'll see the size of everything loaded (Documents, Stylesheets, Images, Scripts, ...).
Use the DevTools Protocol to instrument, inspect, debug, and profile browsers including Microsoft Edge. Matches the Chrome DevTools Protocol. DevTools Protocol instruments, debugs, profiles browsers.
The Browse resources section below shows you how to view resources from various parts of the DevTools UI. If you ever want to inspect a resource in the Network panel, right-click the resource and select Reveal in Network panel. Figure 4. The Reveal in Network panel option See Log network activity. Figure 5. Page resources in the Network Log
Chrome DevTools Protocol. The Chrome DevTools Protocol allows for tools to instrument, inspect, debug and profile Chromium, Chrome and other Blink-based browsers. Many existing projects currently use the protocol. The Chrome DevTools uses this protocol and the team maintains its API. Instrumentation is divided into a number of domains (DOM, ...
Examples of resources include CSS, JavaScript, and HTML files, as well as images. This guide assumes that you're familiar with the basics of web development and Chrome DevTools. When you know the name of the resource that you want to inspect, the Command Menu provides a fast way of opening the resource. Press Control + P or Command + P (Mac).
Finally, I found the source code that handle that in the WebKit source code used by Chromium.
First, what is called "rendering engine" in the documentation is the WebKit engine (at least the version provided with the chromium sources).
Second, there is no way to easily know how a resource will be tag for each category.
The easy part is for the categories: Document, Stylesheet, Image, Media, Font and Script. It use the mimeType and the extension provided by the path part of the URL. The mapping is detailed in this response.
For the other categories (TextTrack, XHR, Fetch, EventSource, WebSocket and Manifest), it seems that it is establish by custom logic during the processing of the given resource by WebKit.
The source code is available in the chromium repository: ./third_party/WebKit/Source/devtools/front_end/common/ResourceType.js.
55
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
