VScode Javascript Breakpoints are ignored by Chrome debugger - javascript

I know there is a ton of "similar" questions, but being similar doesn't mean they are the same, if they were the same, they wouldn't exist, I haven't found the answer I'm looking for.
It must be something simple, as in other projects of mine it does work.
There is a difference in behavior:
-other projects that work: When I click on the bottom-left 'launch chrome against localhost(testApp)' and then I click 'launch chrome against localhost' on the top menu (which is redundant and stupid) Chrome opens and returns instantly to the first breakpoint.
-on this project Chrome opens displaying the file list in the working directory via localhost. Then, when I select the html file the js code runs ignoring the breakpoints. Go figure...

What 'confused' VScode 'Debugger for Chrome' extension is that I had named the html file with the name of my project (eg myproject.html) When I renamed it as 'index.html' it stopped displaying the working folder contents but instead of returning to the VScode breakpoint, the breakpoint turned to the following icon:
unverified breakpoint
When I put the "main.js" file inside a 'src' folder and updated the path in the html file, everything worked. That is more Sherlock Holmes investigation than programming. About 3 hours were wasted...

Related

CSS file not working unless I move the whole folder/project to Desktop

I have a basic webpage/JavaScript example and the CSS doesn't apply to the project unless I move the entire project from (approx 5 subfolders in my Downloads Folder) to the Desktop (No sub folders).
The CSS magically works when I move it to a new location and I didn't change a single line of code in the 2 versions, they are identical. What could be causing this?
Note: Someone did suggest it may have had something to do with VSCode and how I opened the non-working version there first instead of using another editor but that seems far fetched to me.
Original Location
Now on Desktop
Version where CSS doesn't work - File structure
Here is where I declare the script tag
This version that I copied and put on the desktop works fine somehow

Adobe Animate .fla Conversion and publish to HTML 5/JS

Adobe Animate .fla Conversion and publish to HTML 5/JS
The previous person we had doing this task is no longer with the company, and the instructions they left are minimal. They are probably enough to jog their memory but are not helpful for someone attempting with no Flash/Animate experience. In our attempts we get a few different results
The file works correctly in IE but not in any other browser.
The file opens in IE but cycles through each frame, never stops, and doesn’t load in any other browser.
The file opens in IE but has no animation, doesn’t respond to clicks, and doesn’t load in other browsers.
The file doesn’t open anywhere
With our lack of experience with Flash/ Animate, we can’t tell what is the problem. We did try using a file that is unmodified and has a current working HTML5/JS publish, however, when we publish that same file we get the same results as above, while the original works fine. We believe that it something in the publish of the JavaScript causing the failure. I attempted to take bad.html and bad.js and overwrite bad.js with the content of good js. This worked, it’s the wrong data, but it worked and is why we believe the publish of the JavaScript is the issue.
The instructions we are following are as follows.
Open .fla in Animate
Click File --> Convert to --> HTML 5 Canvas (save File)
Click File --> Publish Settings
Basic tab
Uncheck Loop Timeline
Check Export images assets (as spritesheet)
Uncheck Export Sounds
Uncheck Export CreateJS
HTML/JS tab (No changes)
Image Settings Tab (No changes)
Click Publish
I have shared the .fla at https://1drv.ms/u/s!ApKpIVR_uf25hd9MF6pzZPKZjukwQw?e=oEzxRV in the hopes that someone can help and spot the error of our ways.
Thank you for any assistance.

Loading sourcemaps and debugging in Safari?

We ran into an error that only occurs on Safari browsers, so I dusted off my OSX partition on my Macbook and am trying to debug it but I can't find out how to see the original source code and set a breakpoint.
My main file is main.d7f60b0631c7822cabf3.bundle.js and the last line of the file is this, which points to the sourcemap file which does exist because I can type in the url and get it, and it works in firefox and chrome:
//# sourceMappingURL=main.d7f60b0631c7822cabf3.bundle.js.map
In Firefox I can go to the debugger tab in dev tools and under sources I see my original source file webpack:///src/app/app.component.ts and I can open it and set a breakpoint.
In Chrome dev tools I go to the 'Sources' tab and do the same thing navigating a tree to webpack:// - . - src - app - app.component.ts.
Is there a way to achieve the same thing in Safari? From memory since I"m writing this on Windows I can't see any files in the debug tab, just a list of breakpoints. In the resources tab I can see the bundle and an arrow that looks like I should be able to expand it, but clicking on that arrow does turn it from right to down like it is expanded but nothing is displayed. Other files like jquery do seem to have the original source under them when expanded...
I had the same question, and found the answer in another posting here:
How do I toggle source mapping in Safari 7?
(short version, in the debugger, command-click on whatever symbol you want to look at, and it should jump to the original source. For reference, I'm working with TypeScript compiled to JavaScript)
The author points to this documentation:
https://developer.apple.com/library/content/documentation/AppleApplications/Conceptual/Safari_Developer_Guide/ResourcesandtheDOM/ResourcesandtheDOM.html#//apple_ref/doc/uid/TP40007874-CH3-SW4
In the process, I also noticed that in the Resources tab in the Safari debugger, it shows the foo.js with a turner next to it, which expands to show the original foo.ts file (and I assume with a more complex source, it might expand to show multiple sources if they get concatenated together?)
Personal opinion: I think the turner is a great solution to this problem... odd that the debugger defaults to showing the "compiled"/"transpiled" source rather than the stuff one is logically wanting to debug.
First be patient while the browser processes all the source maps.
Whenever that finishes, you should be able to search for any original source file by entering the name of that file into the input field located at the bottom of the pane with the placeholder "Filter". It's a pretty counterintuitive UX IMO. Hope this helps someone!
Screenshot:

Browsers stick with old html and JS cache

I am working on a very simple demo on .net MVC4, very simple, html page code less than 100 lines, with about 30 lines of JavaScript code in a separate JS file, no server side call. Also use jQuery 1.12 and bootstrap libs.
However I had trouble since last night, I added onclick() trigger to a button, but it never work. From developer tool I can see all the changes were gone even I had saved changes in HTML and JS file, and rebuild everything, elements from developer tool window shows old html and js file, without my change.
So below are what I did: (Note I did these in both IE 11 and Chrome)
1) "F5", not work
2) Ctrl + R, not work
3) Went to setting, cleared everything(history, cache, etc..), not work
4) Disabled JS cache in developer tool, not work
5) Add version number as other person mentioned in Stack Overflow
<script type="text/javascript" src="myfile.js?1500"></script>
not work
6)Then I created another js file with different name, copied all the js code to new file, deleted old one, re-add new one's reference to HTML.
let's say the old JS file is named "renderControl.js", then the new one I called it "fkTest.js"
Then I cleared everything I could. Then guess what? From developer tool, the html code remained in old one, I clicked tab "Sources", then I found old "renderControl.js" still under "Scripts" folder, which I had physically deleted.
(Posted on behalf of the OP.)
I resolved this by search the JS file name through my drive, deleted all the found.

My javascript file is displayed as a single line of text in the chrome debugger. Why?

I seem to run into this randomly. It usually displays the file normally, but sometimes it's all scrunched onto one line. I can't figure out what's causing it.
N.B.: In the current version of Chrome, this is actually done by clicking on the {} icon ("pretty print") on the lower left of the developer tools pane.
Ah, figured it out. The line endings on the problem file got set to Mac format somehow, while the rest of the files were Windows format. Not sure how the format swapped but it's easy to convert back (in Notepad++ just go Edit -> EOL Conversion).
You already answered your own question, but this is a good place to note that Chrome (as of v12, currently in dev channel) has a built-in pretty-print function that can make quick work of the typical one-line JavaScript files that all well-behaved websites generate. In Web Inspector's Scripts tab, select a file via the usual dropdown, and right click on the source code. Selecting "De-obsfucate Source" will format the file in a reasonable way, and even allow you to set breakpoints inside the newly reformated code. It's quite helpful.

Categories

Resources