Cannot debug remote JS file in Microsoft Edge - javascript

I am having a Microsoft Edge specific JS error, which is in a callback that jQuery uses. The callback lives in a file that is pulled in remotely from a CDN. When I open Edge's debugger and try to open that file, it does not appear in the list, and neither do any other remote JS files, only files that are local to the website.
I can in fact find these remote files in the chrome debugger, is this an Edge bug or is there some kind of setting I do not know about that hides remote files?

Related

To install Chrome Extension locally

I want to put Chrome Extension on my personal server and download and install it through a browser. However, if you receive and download crx as a response from the server, the error crx_required_proof_missing occurs. Is it impossible to put it on a personal server and proceed?
I created a crx file according to the document, uploaded it to the node server, received it from the browser, and proceeded with the download.
Chrome 75 has introduced some changes, where if an extension is downloaded using a direct URL, then it tries to be smart and figure its metadata which then contains the type which says that it's an extension and Chrome tries to install it immediately - which fails for custom extensions which are not in the Chrome Extension store.
So, if a CRX file is downloaded directly, Chrome figures out the file's content-type to be 'application/x-chrome-extension' which then triggers the auto-installation (and fails for custom extensions).
But if the same file is downloaded indirectly from a website, the website (in our case) sets the file's content-type to `application/octet-stream' which is a generic one and Chrome doesn't try to auto-install it.
So first make sure that the content-type with which your server offer the file is application/x-chrome-extension

When do browsers download sourcemaps?

When do browsers download the sourcemap for a minified file?
I am struggling to find documentation for any browser on if/when they download a minified file's sourcemap (an external file ending in a .map extension, like scriptname.min.js.map).
I am trying to decide how verbose a map file I want to create (which drastically affects the file size) but I don't see where the file is downloaded in Google Chrome (not showing in the network tab of Dev Tools) yet it is available when I debug in the source tab.
Source Maps are downloaded and attached to the browser when you open the developer tools. Until then the browser is not aware of the sourceMap.
There is a code reference to the Chrome's Dev tools
https://chromium.googlesource.com/chromium/src/+/refs/tags/75.0.3770.67/third_party/blink/renderer/devtools/front_end/sdk/DebuggerModel.js
this._sourceMapManager.setEnabled(Common.moduleSetting('jsSourceMapsEnabled').get());
Short Gist of what happens in the above code is
Once Devtools is attached the modal triggers and enables the sourceMapManager. The sourceMapManager manages the sourceMap in Chrome. Once the SourceMapManager is initialized it looks for the #sourceMapUrl downloads and attaches the map to the debugger.
Update Note: It's not a practice to add sourcemap's to a minified file, unless the sourcemap is served from a private network. This is for various reasons security, obfuscation etc. But this is just my opinion,it varies depending on your actual requirement. For Example: If you have any error tracking tools which needs the code to be attached, then you will have to attach the sourcemap.

Safari: put breakpoints in scripts loaded on an iframe

In Chrome this seems to be easy, in the source tree, you see al scripts, including those loaded by iframes, so you can open them and set debug breakpoints.
In Safari inspector although, in the Resources tab, the tree only shows resources loaded on the top window.
I know the console has a dropdown to evaluate an expression on the context of an iframe, but I need to debug using breakpoints, is there a way to do that in Safari?
You can replace the questionable JS file from prod with a local copy using Fiddler (windows) or Charles (mac). These tools can be configured to serve the local copy when the browser requests the remote copy.
This allows you to modify or debug JS from any domain - even if you do not own the code. Adding your debugger to the local file should trigger the debugger console.
Fiddler:
check out this write up for Fiddler details: stackoverflow.com/a/3936627/1861459
Charles:
use the Map Files feature of Charles: http://www.charlesproxy.com/documentation/tools/map-local/

Javascript files won't load within Visual Studio ASP.NET 2.0 pro

I have just loaded an existing ASP.NET project into Visual Studio 2010 that is targeted at .NET 2.0. When I attempt to run it, the first page throws an error indicating that the JQuery file was not loaded ($ is undefined). If I paste the contents of the JQuery file within tags on the login page, everything works. This indicates to me that the JQuery file is not being loaded. I have verified that the path is correct.
This problem is not just with the JQuery file but with all JavaScript files, as far as I can tell.
I have copied this entire project directly from someone else's machine. It works perfectly on their machine. The project, on my computer, is at exactly the same path as on their machine.
If I go to IIS on my machine, and right-click on this application under Default Web Site, then choose Manage Application >> Browse, the application is displayed correctly in a browser. (I have verified that the virtual directory in IIS is pointing to my source code folder) So, it appears this issue is specific to the Visual Studio environment.
What could possibly be preventing the Javascript from loading. (the CSS files seem to be loading without error).
Thanks in advance for any debugging advice you can give me.
There can be many things wrong. Have you tried using Fiddler or FireBug and determined if the resources are requested? If they are what is the status that is being returned?
Is Visual Studio using IIS or the built-in Webserver?

Chrome Extension Save File Dialog

Please I am new to building Chrome Extensions. After the user installs the extension, I want them to configure it by specifying a directory where the app can save files. I want to do this by opening a save file dialog so they can browse to the folder of their choice. How do I do this?
The answer is that there is no means in the Chrome Extension API to write files outside of the sandboxed file system provided by Chrome. This could theoretically be done by writing an interface in C and then call that, but so far I have not yet seen a successful implementation.

Categories

Resources