I've by mistake added the wrong folder to my Workspaces in Chrome DevTools.
How do I remove it?
In order to find the workspaces that you have configured you need to go into the Customize and Control DevTools menu (3 vertical dots at the top right of the console > Settings > Workspace).
Then the workspaces that you have added are listed and you can remove them using the X in the list.
I had problems when I added my whole workspace with all my projects in it to chrome. This resulted in the console freezing for a few minutes every time I opened it.
Oh wait… found the solution.
When you hover over the box there’s an ‘x’ you can click.
Sadly I couldn’t click this ‘x’ because it was being blocked by the path.
By resizing your window you can very exactly position your mouse to just hover over the ‘x’ but not the path. Very buggy.
Related
I am trying to make a chrome extension that contains "folders" of links, similar to a bookmark folder on chrome. These open on hover. The issue I am having is that the tooltip is unable to be seen without artificially extending the size of the div created when clicking the icon, and it just does not look right.
To simplify; is it possible to create something similar to the menus within chromes settings, without removing functionality.
I'm trying to view the emulation panel but I can't find it anywhere. Everywhere I've looked it says to open an overrides panel to find it but that's missing too. I also can't find any helpful or new answers to my question. Pressing esc only opens up console and there's nothing in settings that seems to help. Can someone please tell me how to reach it?
Instead of emulation in the drawer Device Mode is now offered for emulating other devices. It provides many benefits over the old emulation mode, such as taking into account the meta viewport tag on render. So what you see is much closer to what you'd get in real life.
I'm using 51.0.2704.103 (64-bit) on a Mac.
Cmd-Opt-i to open console.
Click the button with three vertical dots and the very top right of the Developer Tools window.
Select: more tools > sensors:
If the console draw is not already open it will open. Either way there should now be a sensors tab next to the console tab on the console draw. Click this tab and follow your nose from there.
Note that this tab had an x by it. Hitting this will hide the sensors tab and next time you use it you will need to follow the steps above again to reinstate it.
For some reason in the latest versions of Canary (and I reinstalled it a couple times) no longer allows you to change elements in dev tools by clicking on them. The only way I can go through the DOM in the elements tab is with the up and down arrow keys which takes forever.
I can use the magnifying glass to select things, but then can't go further into their children elements without using the arrow key. Clicking on elements does nothing at all.
How to fix?
I was seeing this too... seems devtools can get in a funky state. The solution is to:
open devtools
click the traffic light icon and click Settings
scroll down and click Restore defaults and reload button
This fixed it for me...
I had this issue too. I noticed that although you can't click on the element itself, you can on the white space on the left of it, with the same effect.
I don't know what I've switched on (by accident) but every time I have the Inspect Element area open and then try to click anything on the webpage not within the Inspect Element area (especially something jQuery related like a slideshow for example) it greys the page, shows a message saying 'Paused in debugger' and then opens a jQuery file within the Sources section of Inspect Element.
Within the 'Call Stack' area, it shows a message saying 'Paused on a "click" Event Listener'.
I don't remember switching this feature on but I'm keen for it to be switched off.
I know this question has been asked before - I thought I'd found the answer when everyone suggested we look to see if the 'Pause' option is switched on (blue). However, it's not switched on, it's grey not blue or any other colour and when I hover over it, it says "Don't pause on exceptions. Click to Pause on all exceptions".
You might also check the Source tab, check under the Event Listener Breakpoints panel if you've set any breakpoints under 'Mouse'.
This can also cause the issue
Break Point icon at top left should be blue like this(For Deactivate BreakPoints)
Should not grey like this
Found solution here, if the little octagonal stop/pause sign (at lower left of Chrome "Sources") is colored (blue or purple), you need to click on it until it's black again.
It did drive me nuts for a short while.....scroll all the way to the bottom of breakpoint window and you'll find XHR Breakpoints & under it there is the Any XHR checkbox...
Goto the sources tab and check all breakpoints.
Go to Elements tab and remove all breakpoints from right pane under DOM Breakpoints
One possible cause, it that you've enabled the "pause on exceptions" (the little stop-sign shaped icon with the pause (||) symbol with in in the lower left of the window). Try clicking that back to the off/grey state (not red nor blue states) and reload the page.
For me, I resolved it by temporarily disabling the Chrome Bitwarden extension.
You could check to see in the Sources tab in the devtools panel to see what is causing this error, it could be an extension.
To open the devtools panel on Chrome, press the F12 key.
For Visual Studio Users, just go Tools>Options>Debugging and make disabled it
In Chrome, you can edit your resources in line and Chrome will generate revisions of that resource. Here the documentation: http://code.google.com/intl/en-US/chrome/devtools/docs/elements-styles.html#persist
Sadly, it's not working here, and I don't know how to enable it. It is not possible to expand the file in the resource tab to see the revisions.
Using Chrome 15.0.874.121 on MacOS here. A colleague of mine tried the developer channel, but it's still not there. But I saw a demo of it at the Google Developer Day.
This works in 15.0.874.121 as well -- just double-click on a text content of a CSS or JS file in the Resources panel, type something and press Cmd+Enter. You will see the lines that you added displayed with a green background, and the edited resource on the left will become expandable.
Alternatively, the Dev channel has an "Edit" button (a pencil with dots) below the resource contents if the resource is editable. You can click it to toggle the resource editing.
It works fine on ToT and on dev channel 17.0.942.0 dev.
The scenario.
open inspector's Scripts panel
start editing with double click
save the revision with Cmd+S
optional exit from editing mode Shift-Enter
open Resource Panel
click on the right arrow symbol close to edited file.