I used to edit the JavaScript code in our app through chrome dev tools and those changes worked fine. For the past few months, I'm not able to do the same. Chrome is still allowing me to edit the code, but those changes are not reflected. And also, I'm not even able to hit the breakpoint once I make changes in the file where I had the breakpoint.
I did find a solution/workaround, which is by enabling the "overrides" option in the chrome dev tools and attached the workspace (target build) folder. This process is currently working fine.
But I'm still curious why live edits suddenly stopped working. Anyone had encountered similar problem and know any root cause?
Related
I'm very new to debugging JavaScript, let alone Typescript, let alone a Stencil project that uses tsx files (which I assume are a certain type of reactive Typescript files).
I hoped that by adding a debugger statement into the code, using a refresh in Chrome the Debugging tools would show up. But nothing happens. If I add a console.log at the same place, it behaves as expected. But nothing happens with a debugger statement.
What to do? I don't want to debug with tons of console.log everywhere. 😏
I'm using VSCode by the way. Don't know whether that is relevant. I read in https://github.com/microsoft/vscode-js-debug that JavaScript debugging should be built into VSCode. I don't care whether I debug inside VSCode or inside Chrome - as long as I am able to debug somehow.
Here is the repository, if somebody wants to give it a try or checkout configuration files: https://github.com/NothingAG/adg-components
Thanks a lot.
Instead of adding debugger statements in code you can always add breakpoints in Chrome Developer Tools.
Load your app in the browser
Open Developer Tools in Chrome (for example right-click on a page and choose "Inspect")
In Developer Tools choose tab "Sources"
Open the file you want to debug by hitting command-P. An input field appears where you can enter the name of the file you want to debug
Add a breakpoint by clicking on the line number in the gutter
Next time your app hits the breakpoint the debugger shows up.
Apparently the build tool (nx) runs a production build which is why debugger statements are automatically filtered out.
To fix it you can explicitly instruct Stencil to run a development build:
npm start -- --dev
I am creating a website and I used to make changes in the .js files in the Sources tab. These changes were directly reflected in the page. However, for some reason this does not work anymore. Note I am not willing to save these changes. It is just to do some quick tweaks and see the results directly. I tried it on another PC as well and also via Edge developer tools. Even older version of my website were it worked earlier.
Any suggestion, I am completely lost on what has caused this??
I have been happily using the Chrome development tools for some five years to debug my Angular/node.js code. I open the Chrome development tools, click on the "sources" tab, navigate my way to the "Webpack" link on the left, and find my way to the directory of all my Javascript source and away we go. Among other matters, the good folk of Chrome have continually improved the debugger over the years: it is a beautiful thing. I have been very happy.
Until this week, when suddenly the Webpack disappeared from the source options. I can see lots else (essentially, all the javascript referenced direct from the index.html file) but the webpack is not there. Nor is it accessible in Safari. But it is still there in Opera and Firefox.
What is going on? I can not be the only person who routinely uses Chrome to debug a webpack application. Help, please.
Here is a screenshot of what I see in my browser. First, as it now appears WITHOUT any Webpack access, in Chrome:
Second, as it still appears in Firefox (and Opera) with Webpack and all my stuff:
Update! I've found the code in Safari. But it no longer appears under the label "Webpack". Instead, it appears under the site URL-->dist-->app.bundle.js (which appears as a folder containing all the code files, thus:
However, app.bundle.js in Chrome is NOT a folder; clicking on it brings up this message:
Yes, I can see that I might here be able to use the "Filesystem" tab to import the files from my development system, and to edit and debug them directly in the debugger while running the app on a local host. Very neat. But actually, there are many times I need to be able to dig inside the app on the production system. I can still do this on Safari, Firefox, Opera. But not now on Chrome. Why not?
UPDATE! I have been digging yet further. Not only is it only Chrome that has this problem. It appears that it is only Chrome on an M1 chip Mac running Big Sur. And digging still deeper: when I look at the app.bundle.js file I discover -- lo and behold! -- all 13000 lines of my code, originally distributed across some 60 component.js files, appears in this one indigestible mega file. Yes, I could find the bit I am working on in there and debug it. So Chrome developers: how come the Safari folks are able to deconstruct app.bundle.js back to the original file structure and you guys cannot?
I've a really annoying problem on recent Chrome version 75.0.3770.90, also on Canary and Dev versions (Win 10 Build 18362). I'm developing an Angular app and when I'm setting up a breakpoint in dev tools, it keeps opening the minified app.js, which causing the whole chrome to freeze. It's annoying and it seriously undermines my work productivity. Also I noticed this with tests, there it opens karma-test-shim.js file with the same effect. I know by reading all possible forum posts, freezes caused by opening large minified files are common, but my problem is why it even opens if I don't have breakpoint there? On the other hand, if I blackbox the minified scripts, then I can't open the .ts files (the dev tool doesn't find them), which is, again useless for me.
Img: Although the breakpoint is set in .ts file, the app.js keeps opening up (it was previously closed).
I don't know if this is issue in my set-up or if is a Chrome issue, but I'll be thankful if someone could help me with this frustrating issue.
I am working on an apache cordova app. I do two different debugging, first is on my localbrowser(chrome) and then on an actual device. When debugging in chrome, I set break points inside VS and all are hit. Then when on chrome when I open the developer console, it stops the debugger. I swear that this never happen before. Any suggestions? I found some post that are almost related to my problem but it never solves them.
At first I thought the debugger stops because of my option settings in Visual studio, but I started a new blank(apache project) project and it works. Then I added my js, html, css files and settings to this new blank project. And there it goes, the debugger stops when I open chrome developer tool. I ran out of ideas. Please help.
Prior to V 63 of chrome, it would not allow multiple remote debugging sessions. Opening the chrome debug tools would take over the only available connection, and terminate the one held by VS.
However this has now been rectified by the chromimum team !
Unfortunately there is still a problem with the Visual Studio debugging session getting terminated when F12 is hit.
There is a workaround, and hopefully the VS team will correct the underlying issue. See my post on MSDN for full details
I try to debug it in my VS2017, All projects get the same result as yours, it would stop VS debugging if we click F12 to start the chrome developer tool.
As you said that the blank project worked well in your side, if possible, you could check that whether you changed any settings in your side. I just use the default settings.
Of course, you could also reset your VS settings in your side, and then re-debug your blank project, view the result.
TOOLS->Import and Export Settings Wizard->Reset all settings->select “No, just reset settings, overwriting my current settings”->Choose a Default Collection of settings.
My understanding it is the normal action if it stopping VS debugging after you start the browser debugging, since generally we could use one debugger for one process.
In VS 2017 Go to Tools->Debugging->General then check
Enable Javascript Debugging For ASP.NET(Chrome, Edge, and IE)
Hope that helps you.