Chrome Extension Debugging: Enter Debugger Immediately? - debugging

If I set breakpoints in the background js of my chromium extension, then disable/enable it, the breakpoints are not hit. I've tried adding debugger; in the js, but I still cannot enter the debugger.
Is there a way to enter the debugger immediately upon installing or enabling an extension?

Add the debugger; statements, and inspect your background page. Then, use F5 (or location.reload() from the console) to refresh the Developer Tools. This will actually refresh the background page, letting you debug the page from the top.
Note: this will not work for "first run" code, but will for "start up" code.

Related

Vscode debugger hits a breakpoint on page reload

I'm debugging a react application using VS Code debugger for Edge (The newer Chromium edition, I used to use Chrome, AFAIR there was the same problem). When I reload a page, the "paused in debugger" label appears a couple of times, then disappears. It doesn't bother me too much, but the problem is it always opens Sources panel and because of that on every reload I have to open Console manually which is very annoying.
I'm absolutely sure I have no breakpoints on, the Breakpoints panel in Edge is empty, the Breakpoints panel in VS Code only contains my breakpoints and the problem persists if I disable all of them. I also have Uncaught exceptions breakpoint turned on, but disabling it doesn't help. Sources panel opens some React internal file, namely injectGlobalHook.js. Also sometimes after reloading a page I open VS Code to find that it opened a tab with react-dom.development.js for some reason. Is it supposed to work like this? And is it possible to make Console tab open on reload, because it's impossible to work like this

Firefox Breakpoints are completly disabled

Since FF 67 I cannot use breakpoints to debug my javascript on webpages coming from localhost. All breakpoints are completly greyed out so that it is not possible to set any.
I have tried all things in this post
Brekapoints are not deactivated by the deactivate breakpotins button.
I tried to clear the prefs.js file
I also tried the checkboxes for pause on exception
and the checkboxes in the preferences for the dev tools.
Any idea?
I am also running into this issue. I found a fix online but it doesn't always work. Close the debugger window, refresh the page and open the debugger window. You should be able to set the breakpoints now. If you refresh while the debugger window is open, you won't be able to set the breakpoints at all.
Doesn't always work, but I was able to test some js code last night

preserve breakpoints on refresh firefox

I put a breakpoint using the debugger in firefox. On refresh, the breakpoints go away and the webpage loads completely. What may be the issue? I was able to successfully preserve breakpoint in chrome.

How can I get Firebug to start automatically in a popup window?

I've got Firebug open on my website, and then I click a button which opens a popup window. However, Firebug is always greyed out by default in the popup window. I can click the icon or press F12 to start it, but I really need it to start itself, immediately, because I want to watch the AJAX requests that happen on page initialization of the popup window. By the time I click or press F12 it's already too late; it's missed those requests.
How do I get Firebug to persist in my popup window?
There is an option in the Firebug menu called On For All Web Pages, which opens Firebug automatically. Though unfortunately that also doesn't allow you to track the network requests.
So this actually looks like a bug to me. You should report that in the Firebug issue tracker, so it can be fixed.

How to make Firefox debugger run in a separate window/tab?

I do wonder if it's possible to open the Firefox's (I have 18.0.1) debugger in a new window/tab as right now the debugger's pane is too small at the bottom of the page.
[Edit]
Ok, I've made a few screenshots to show that Firefox does have a debugger on its own:
Current Firefox nightlies have a little two-window icon next to the 'x' in the debugger toolbar that tears it off into a separate window, but that might not be present in 18 yet...
If you mean Firebug, these directions should be sufficient.
Click on the Firebug launch icon so the hidden submenu appears.
Hover over "Firebug UI Location"
Select "Detached"
EDIT:
Ok I see... you are using the Firefox built in Developer Tools and not Firebug.
So as far as I understand, there seems to be no way to run the JavaScript Debugger on a separate window for non-remote work. Here is a statement directly from the JS Debugger docs:
The JavaScript debugger is available in two varieties: one for
debugging content running directly in Firefox, and another that lets
you debug code running on a Firefox OS device, or in Firefox on an
Android device. The main difference between the two is that the Remote
Debugger runs in its own window, while the web content debugger runs
in the same tab as the Web content you're debugging.
Also here is a link to the Debugger's docs:
https://developer.mozilla.org/en-US/docs/Tools/Debugger
Why do you think that the Debugger view is too small? If you hover over the top bar, you can drag it up/down as much as you need to. Aslo are you sure that the JavaScript Debugger is what you're trying to use? For example Firefox has other tools as well. The "More Tools" link shows other built in tools as well - all these tools together are called the "Developer Tools". Here is a link to all of their docs: https://developer.mozilla.org/en-US/docs/Tools
I hope this makes more sense now!
Screenshot:

Resources