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.
Related
I want to remove this suggestion in VS Code which comes on hover, as it disrupts my scrolling.
That area of the UI is called the explorer. What you're seeing is generally called a "tooltip" in UI terminology. Looking through the available settings at the time of this writing, I do not see a setting to disable tooltips for the explorer listitems.
I looked through settings containing "tooltip" and ones starting with explorer. and workbench.list. and didn't find such a configuration point.
If you open the developer tools with the Developer: Toggle Developer Tools command, you'll see that that particular tooltip is just implmeneted with the HTML title attribute. The way that it is rendered is up to the browser, which in this case is chromium, and the particular style it appears in differs by platform / OS.
You might be able to write an extension that removes those title attributes.
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?
Anyone know of a way to open Chrome Dev tools to a new window upon open?
I know that I can click F12 and then click the 'customize' button and change orientation or pop out the dev tools window. But that's an extra step, and often a window resize is necessary, and when you do it 50 times a day, it gets to be tedious.
Also, sometimes, on pages I'm testing, pressing F12 will change the layout of the elements on the page and even popping out the dev tools leaves the page layout different than before I opened dev tools. This can make it hard to tell if an element is visible or not, which makes troubleshooting Webdriver more difficult.
Ideally, CTRL+F12 or something to open dev tools as a separate window would be super handy. (to any Chromium devs that might be listening ;) But if anyone has another solution, I'd love to hear it.
If you have your DevTools un-docked, the dock mode, size and position of your DevTools window will remain the same as you previously set it. For example, I just set mine to be maximised on my other monitor. Every time I open up DevTools, it's an un-docked, maximised window, and there's no change to the layout of the inspected window other than the fact it's no longer in focus.
You could alternatively launch Chrome using the --auto-open-devtools-for-tabs flag, which will automatically open DevTools in the dock mode, size and position you had it previously. You can use:
Mac:/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --auto-open-devtools-for-tabs
Windows: "C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --auto-open-devtools-for-tabs
In WebDriver, you can set flags for how Chrome opens. However, after looking into this further, it turns out Chrome currently do not support multiple clients connected to the protocol simultaneously.
As for speeding things up, you can switch between dock positions with Cmd+Shift+D (Mac) or Ctrl+Shift+D (Windows). This toggles between the last two modes you have used, so say you have it docked at the bottom, you then pop it out, using the shortcut now will toggle between the two.
Here's how you do it. On opening the developer tools, with the developer tools window in focus, press F1. This will open a settings page. Check the "Auto-open DevTools for popups".
Originally documented here -- https://newbedev.com/automatically-open-chrome-developer-tools-when-new-tab-new-window-is-opened.
Recently, I have noticed that Google Chrome's JavaScript console autocompletes previously inputted commands. For example:
I want to remove this feature because the autocomplete displays variables that may not exist. Is there a way to remove this feature?
Yes. A lot of people found it annoying, so they added a setting to disable it.
First, enter the DevTools settings from the menu button in the top right corner.
Then, in the "General" section, disable "Autocomplete from history".
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.