Chrome Devtools's has some some undesirable behaviours regarding to css sourcemaps like in this link https://code.google.com/p/chromium/issues/detail?id=257778.
Is it possible to edit Devtools's itself (like Style Panel) so I can do things like directing sourcemap links to open them in editor or prevent loss of sourcemaps? I was able to edit Opera's Dragonfly from the local source. Is it possible to make similar changes with Devtools?
You can edit DevTools UI and serve it from local source tree. See this doc for more details.
Related
While in dev-mode in my application, I would like to be able to have links on the page that automatically take me to a specific file in the Chrome Dev Tools.
Is there any way to generate a URL that when clicked in Chrome, opens the Dev Tools at the Sources tab and at the desired file ?
You are able to "inspect the inspector": How do you inspect the web inspector in Chrome?
Simply undock it, then inspect DevTools itself with ctrl+shift+i. Then head on over to the sources tab in original (first DevTools), inspect it, and get its URI from Elements.
Or use chrome://inspect/#other
Example URI (first part only):
devtools://devtools/bundled/toolbox.html?remoteBase=https://chrome-devtools-frontend.appspot.com/ser…
Your requirement is somewhat specific, so I don't think it is possible (at least not natively).
You probably can achieve what you want extending DevTools with an Extension (see the documentation). This way, you can make your page interact with the extension to make it open a specific panel in Chrome Dev Tools.
I'm studying HTML/CSS and doing a single-page project using WebStorm and Chrome. Normally I test the way my page running Chrome in WebStorm which results in opening http://localhost:63342/ in my browser address line.
After I finished my project I closed WebStorm and ran it again in Chrome, but this time I open it by clicking on the shortcut on my desktop.
To my surprise, the way the page looks was different from the one that I saw when I opened Chrome through WebStorm.
The question is: Why so? It's the same HTML/CSS code, the same browser.
You can use http://brackets.io/ as an alternative. It has a similar feature called "live preview".
It seems that there is no style applied to your page. If you have your css in a separate file, my guess is that WebStorm doesn't locate your CSS file or you are not referencing it correctly in your html. Try looking at the "Sources" tab from the Chrome Developer Tools (F18) and see if it loaded the .css file.
It turned out that it had something to do with the page scale. When I press cmd and + and the page zooms in, it gets a slightly different look.
I not found any solution for that. Maybe this feature not exist - but I think I may be useful. Maybe I can write some css for Devtools?
UPDATE: I tried to add to the body of Devtools opacity: .5 but looks like it is not a solution:
This isn't possible. The panel is essentially its own viewport space. There is no "page underneath" the DevTools. Think of it like when the DevTools is open, whatever space it takes is not given to the page. This is why it triggers media queries when you resize the DevTools.
Changing the DevTools opacity will only give you a white background, not your page.
You should be able to customise the panels to be transparent using CSS via a Chrome Extension, using the applyStyleSheet API call. This is done within a JS file embedded in the referenced devtools_page page specified in your manifest file.
See Extending DevTools for more information.
var xhr = new XMLHttpRequest();
xhr.open('GET', 'styles.css');
xhr.send();
chrome.devtools.panels.applyStyleSheet(xhr.responseText);
To find the relevant CSS selectors for the panels, you can inspect Developer Tools by opening it in un-docked mode and doing Cmd + Opt + I (Mac) / F12 (Windows) again.
Take a look at ZeroDarkMatrix Theme for Chrome as a full example theme. You will need to enable experimental features in the browser for this to work. As per the link above:
Open chrome://flags ▶ Enable Developer Tools experiments and click
"Relaunch Now" at the bottom.
Open developer tools settings ▶
Experiments ▶ [✔] Allow custom UI themes.
I use the extension New Tab Wallpaper for Google Chrome. I am wondering if it's possible to modify it so that it doesn't show the annoying Settings button on the bottom right corner. Or at least doesn't appear unless you move your cursor down there.
screenshot of new tab page
Looking at the extension in the Chrome Web Store, it doesn't look like the author linked the project to a homepage or an open source code repository such as GitHub.
That being said, if you really wanted to alter the extension, you can find the code on your computer, see this answer regarding where to find the extension on your computer for various operating systems. A Google Chrome extension is simply HTML, CSS and JavaScript.
Early on I was doing some debugging and testing using the chrome dev tools(known as inspect element). I found out that on the Resources column of the dev tool, Chrome can always access the resources from the server and display them(links, videos, images....). Just wonder how Chrome does that. Is there any way to write a piece of code doing the same thing(access the server resources of other websites, not modifying them but displaying, stuff like, the link of the video currently playing on the website, which usually does not pop up until the play button is hit)?
DevTools doesn't fetch resources from a site. It fetches them from the browser.
There were similar questions already
How does webkit/chrome's WebInspector Resources Inspection work?
and
Getting Information from Google Chrome's Developer Tools
The Chrome Developer Tools has two parts frontend (html+javascript) and backend (C++) and there is an API which specifies the protocol between these parts. You can see the specification here. You can use it for writing your own app instead of standard DevTools frontend.
Also there is experimental debugging API for chrome extensions.
I think the Webkit WebInspector go over the hole source code and match all resources of the source.
So it match <link href="something.css"> and then it place something.css in the resource panel under stylesheets. And exactly the same thing for the other tags.
It's not hard to make regexes for this.