I want to customize how Chrome devtools console looks. (In particular, I want to limit the width of script filename / line number which is printed next to each console.log output, and which is inconveniently long when I use tampermonkey userscripts.)
I know that chrome devtools is a web app itself, and I can inspect it and view its HTML elements and their CSS styles.
But how can I edit these CSS styles such that I could save my edits persistently? Are there their CSS files somewhere on my computer which I can edit and save?
Related
is there a way to modify chrome's devtools, for example add or remove html?
I want to change the prompt of the console but all I found so far are css mods or themes.
its not 100% about only changing the prompt, but also play around with it.
I am working on a website that a script is loading a big chunk of style in the HTML. my problem is the chrome dev tools don't let me view the full script. it's also not available in the resource tab and all chrome is doing is putting three dots while trimming the content. is there any way to view it in the dev tool? even if I copy the style content, it's trimmed version.
the same content in the firefox doesn't even load as something readable.
and I have to copy the content and reformat to see the result. wonder if there is any better way to do this?
In Firefox use Style Editor tab in dev tools. from the official documentation:
The Style Editor enables you to:
View and edit all the stylesheets associated with a page.
Create new stylesheets from scratch and apply them to the page.
Import existing stylesheets and apply them to the page.
You have (at least) 2 options to see this tab:
Hit F12, it will open up the Dev tools for you, then click on Style Editor tab.
Hit Shift + F7, it will open up the Dev tools and active Style Editor tab for you.
After opening the tab, you should be able to see all the stylesheets associated with a page in left pane (The style sheet pane), the name of inline stylesheets normally is something like <inline style sheet #1>, click on it, the content/css will show up in right pane (The editor pane).
The behavior I want is that when I click on a file (of certain extension) in the explorer panel, instead of opening a text editor, a webview shows up. An example would be that when I open a .md file, instead of showing the markdown text, a custom made WYSIWYG markdown editor (webview) is shown directly.
I managed to open the webview via command and I even hooked it up to the onDidChangeActiveTextEditor and onDidOpenTextDocument events so that whenever a text editor is opened or focused, the corresponding webView is opened and focused immediately.
This almost does what I want, with two issues. One is that the text editor still shows up for a moment. Second, and more problematic, the webview does not sync with the explorer panel as well as the text editor does. For instance, when a text editor is focused, the corresponding file is selected in the explorer panel. The webview doesn't do that.
Is there a way to make the webview the default and primary editor for a type of document?
This is not possible as of VS Code 1.30. These issue are tracking something similar: https://github.com/Microsoft/vscode/issues/12176 and https://github.com/Microsoft/vscode/issues/22068
When I have the JavaScript console open in Chrome, I am often unable to use forms, fill in inputs, or click buttons in the browser because Chrome is highlighting HTML elements for me.
Sometimes, it stops, but I don't know what I am doing to make it stop.
Is there a keyboard shortcut or something to make Chrome not highlight HTML elements and let me use the form on the page with the console open?
This irritation can be avoided by using a different keyboard shortcut. cmd+shift+c makes chrome inspect elements on the page, even after you switch to the Javascript console. cmd+option+j opens the console and lets you go on behaving like a user.
I found a custom theme for my chrome web inspector but I need to make some small changes. Where do you find the selectors for the elements in the web inspector?
In the picture below I am trying to make the expand arrow white so you can see it against the background:
DevTools front end is an HTML page, so you can inspect its elements/layout via another instance of devtools. To do so, undock devtools, focus on its window and hit Ctrl-Shift-I (or Cmd-Opt-I on mac).