Vscode debugger hits a breakpoint on page reload - debugging

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

Related

Safari JavaScript Console Not Executing JS Or Showing Output On Certain Pages

I've encountered a Safari-specific JS issue in a page I'm locally developing, so I need to use the Safari Web Inspector.
In Safari Version 13.1.1, when I open the inspector and select Develop > Show JavaScript Console and start entering JavaScript, I don't get any output and the JavaScript is not executed (e.g. an alert does not fire).
On any other page, the safari JS console works just fine for me. Here's an example of normal behavior, on stackoverflow.com:
Note: the Safari JS console on other locally developed pages are working just fine.
What could possibly be causing this?
As other users mentioned, opening the page in a new tab fixes this, but you can also just close the Javascript console (clicking the 'x' in the console window) and re-open it.
Less than ideal, but if you reopen the file on a new tab, the new console works.
I get this error. often, this is because I occasionally repeat something way too many times, so that it just stops executing the console, I believe to prioritize other code. my fix is to re-open the page, and even though re-loading sounds like it works, it doesn't always.

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

IE11 performance profiler not giving any results

I'm trying to improve my site's performance in IE11 and I cannot seem to get any results out of the performance profiler. I've read this page and it seems pretty straightforward but I must be missing something. Here are the steps I take:
On the F12 tools Performance tab, I click on either the green play button or the "Start profiling to begin a performance session (Ctrl+E)" link.
I perform an action in my app (as simple as clicking on a field and back out)
I hit the red stop button or the Stop profiling to generate a report (Ctrl+E) link
The Profiler tab shows "Analysing the collected data:" with an empty progress bar. The progress bar never goes anywhere and after a few seconds the Profiler tab just reverts to saying "Start profiling to begin a performance session (Ctrl+E)".
This happens on any website that I try, not just mine. The rest of the F12 tabs (DOM, Console, Network) all work fine. Using IE version 11.125.16299.0, update version 11.0.49 on Windows 10.0.16299.
What am I doing wrong?
I don't think you're doing anything wrong. The performance profiler appears to be unable to show the reports it generates in IE11 right now. However, the fact that IE and Edge seem to share their debugging tools (in Windows 10 at least) might offer a viable workaround.
Press CTRL-E, perform your actions, press CTRL-E again, and wait for the performance tab to revert to its initial state. Some part of the profiler seems to have crashed at this point; you'll find that the "import" and "export" buttons won't work.
Exit the debugging tools, open them again, and open the performance tab.
Click on the (now operational) "export" button to save your profiler report.
Open Edge, start its debugging tools, and go to the performance tab.
Import your saved profiler report. It'll show up just fine now.
For what it's worth, importing your saved report into the IE11 debugging tools will result in an error about "Promise" being undefined or somesuch. This makes sense, as the ES6 Promise constructor is supported by Edge but not by IE11.

Why does visual studio not repaint the program when I click on certain places like the solution explorer tab?

I managed to get VS2013 in this strange state a couple times now: The program loads fine but when I click on the solution explorer tab, the error list tab and a few others the program won't repaint in response to my click. I have to minimize the program and remaximize, whereupon everything appears as it should have right after the click.
I don't know if anyone had this issue before.. if not, where can I file a bug report?
I changed back to software rendering, it worked properly immediately. I was using 3d acceleration.

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