Google Chrome dev tools automatically opens the 'drawer' pane - macos

As of a few days ago, whenever I open the developer tools in Chrome on OSX the 'drawer' automatically opens - 2nd screen shot
The icon in blue shows/hides the drawer (now defaults to on) - First screen shot
This is so annoying and I cant figure out a way to stop this behaviour. It never did this before....

This was annoying me to no end and I could never figure out why it was automatically opening. Apparently the fix, at least in my case, is that I went into the Emulation tab inside of the drawer and disabled any of the overrides. Everything in blue is highlighted as an override. Disabling those seems to have fixed the problem for me.

Offering Phil Rykoff's comment as a solution...
Disabling JavaScript source maps seems to do the trick for me.
Settings > Enable JavaScript source maps
I was getting an error parsing my source maps so this could well be the cause for those with similar errors:
Failed to parse SourceMap: https://myapp/vendor.map

Found the solution press the "Escape" key when you're on the Developer Tools

There is also a setting under Appearance -> Show 'Emulation'/'Rendering' view in console drawer which will turn them off by default. But if you have some overrides then the panel still popup when you open Developer Tools.

In the DevTools, click the hamburger-icon.
Click 'Hide console'

Further to Ed's solution (which did fix my problem) the issue appears to be that the whatever page you are viewing is generating a console error- which in this case just happens to be a SourceMap error.
Because the default tab on the Dev Tools pane is "Elements" it appears that Chrome opens the console drawer so that the error message is visible when you reload. Rearranging the tabs in the Dev Tools so that console is the first item solves the issue, and I could re-enable SourceMap errors.

Related

Firefox debugger breakpoint not working

When I click on a line to set a break point, the break point line gets highlighted, then the break point highlight disappears.
Other than that, Firefox developer debug has been working fine.
This might help people in the future without having to modify any js file:
Have you clicked the Deactivate breakpoints button? Pressing this will toggle breakpoints on/off.
If the icon is in blue, it means the breakpoints will be de-activated.
Note: I have noticed that in some sessions the toggle is activated although not blue, a refresh of the page solved this.
This just happened to me in Firefox 60.3.0. The tip about removing the Mozilla folder led me to a better solution, which is to edit the prefs.js file in the Mozilla profile folder. (In my system this was in C:\Users\xxx\AppData\Roaming\Mozilla\Firefox\Profiles\xxx.default)
I deleted all of the lines in prefs.js that began with
user_pref("devtools.
e.g.
user_pref("devtools.toolsidebar-height.inspector", 350);
user_pref("devtools.toolsidebar-width.inspector", 350);
This fixed the problem while preserving all my bookmarks, saved passwords, etc. The lines in prefs.js were recreated when I next ran the debugger.
I my case I have mistakenly enabled 'Blackbox source' on a file (in right click menu). When I disabled it then the breakponts works again.
I just encountered the same problem - Firefox Quantum 60 on Ubuntu.
Solution for me was to delete the ~/.mozilla folder for my account. Lost all my bookmarks, history, settings, etc., but can now set breakpoints again.
In my case it was 2 check-boxes to check:
I ran into this problem, or a variant of it as well. For me, it was because webpack was defaulting to setting devtool to "eval". This broke stopping at breakpoints in Firefox for me. Changing that setting to "source-map" resolved the issue, though I suspect most other non-eval options would work fine as well.
I noticed this because I looked in the generated JS file and noticed everything was put into eval() calls.
Also, check the console for errors. I've experienced this issue (can't set a breakpoint) when there is an error elsewhere in the page..
I just stumbled across a similar problem. In my case, it was the eye on the lower left of the debugger window.
The breakpoint vanishes after clicking the eye:
Update:
And another way to blackbox a source:

How to prevent Firefox reloading tabs (even one clicked on)

Seriously, is there any way to tell Firefox NOT to reload tabs after start?
I know I can check "Don't load tabs until selected" in Options window, but this only stops reloading tabs automatically and will still reload tab I click on - I do NOT want that!
I want to reload every tab myself.
The reason is that sometimes I have multiple tabs with Adminers' SQL command textarea which gets cleared on reload. You surely get how happy I am everytime I have to remind the commands.
I tried googling for any extensions or about:config options but nothing do what I want. Am I the only one wanting this?
I submitted the bug here https://bugzilla.mozilla.org/show_bug.cgi?id=900494
I don't think it's possible to disable loading of clicked tabs. But, you can try for instance Work Offline addon that allows you easily switching Firefox to offline mode. Firefox loads clicked tab from its cache in offline mode and it could preserve your textareas.
I know I'm late to the party, but I just had this issue myself and perhaps this answer will help other users. I went into about:config and searched for the setting browser.sessionstore.max_resumed_crashes and changed that from default 1 to 0.
Go to Firefox' about:config (via the address bar), click "accept the risk", then type accessibility.blockautorefresh in the search bar and toggle that setting to true.
Edit: restart of FF is necessary.

Unable to set breakpoints in Chrome dev tools, version 26.0.1410.64 m

I need to debug some JavaScript an' I use Chrome dev tools. I'm a newby in JavaScript (just started to learn a couple of days ago), an' at work I could set breakpoints via the Resources pane. But at home for some reason I can't do this: after the click no breakpoint appeares.
I have Chrome version: 26.0.1410.64 m.
What could be the case?
clicking on the De-Obfuscate Source button (i.e. {}) solved this issue for me.
I'm a fool! haha! breakpoints are set in the Source pane )))
It's been a while, but in version 33.0.1750.146, but my problem was that I was on the Sources pane (I'd call this a tab; it's one of the items at the very top of the window), but I was on the Content scripts tab (on the left hand side). I needed to switch to the Sources tab.
To be clear, there are two sets of Sources tabs; one is within the other.
UPDATE 2016-01-07: Now I'm on 47.0.2526.106. The only thing that worked for me today was to close DevTools and re-open. It was a little finicky. It worked once, then stopped, and I had to close the DevTools and re-open again. I saw #johntrepreneur's answer about closing the browser, but unfortunately I have too many tabs open on too many workspaces, so that's too much of a pain, so I didn't try that, although I have to assume that would work.
Other solutions didn't work for me. Had to close and restart browser to be able to set breakpoints again.
This also happens when there is a JS error in your code.
Some sort of weird built in function in windows 10 i think because I did press a few buttons by accident. Some of my keys even stopped working in certain areas of visual studio. F.e the letter "c" stopped working in the find window.
Mine did this and no solution worked, i pressed alt, windows key and function key a few times and my problem went away.
Fixed as follows: For me, the issue stems from having set up Chrome to interact with operating system files. If you set this up, then the fact is evident from a green dot by the file name. At some point, I could not set a breakpoint in a recently edited file. I fixed this by disconnecting the interaction, as follows: When viewing "sources", above the code, there were some file names listed. Clicking the [x] to make the particular filename go away gave a caution message; I proceeded without saving. After that, I was able to set breakpoints for that file.
I also had this problem. However, once I closed the popup message in my browser, suddenly all my breakpoints that I set in that time appeared. Mental note: Don't set breakpoints while your app is showing a popup.
I couldn't find any direct fix for this problem.
It seems that chrome keeps settings of your site stored somewhere whatever you do to clean it. (I tried removing the folder from workspace, closing et reopening chrome etc... and nothing worked).
A workaround is to change your site's url to make chrome consider it a new site

firefox error console inside Web Developer

Is there a way to rename or remove a menu in Firefox. My Error Console is hidden under the Web Developer Menu and I want it to be under the Tools instead. Please see screengrab: http://img190.imageshack.us/img190/5720/firefoxpv.jpg
THank you.
You can try installing this plugin and see if it enables what you are trying to do.
Firefox Menu Editor
You can also install Toolbar Buttons and you'll have additional set of buttons that you can put in various places. Right click e.g. on 'Refresh' button, select 'customize' and here you go. Console is a red button with exclamation mark.

firebug come home?

For a couple of days I had noticed that the "script" tab of firebug had not been working. I ignored it because I wasn't working with javascript at the time.
Then the day came I was going to need that script panel, which still wasn't working, so I decided to reinstall firebug.
And now, when it's installed, it's just plain gone. No icon that I can see, neither on the bottom bar nor the top bar. No mention of it in the tool menu. The only evidence it's installed is an entry in the extensions list and a file in the extensions folder.
I've tried googling but have not fond anything that sounds like my issue.
I'm using firefox 6 on Windows XP.
For some reason, Firebug changed it's toolbar button (and removed the old one) from the old bug to a blue default cursor over a width, short box. Right-click on a toolbar, select Customize, and look for the icon next to the bug at the large picture of Firebug at top of this page:
http://getfirebug.com/html
This is the button you're looking for (download the raw file to view):
http://code.google.com/p/fbug/source/browse/branches/firebug1.9/skin/classic/inspect.png
You might try checking if it's profile-specific to start:
http://support.mozilla.com/en-US/kb/Managing-profiles
Try disabling any other extensions you have installed?

Resources