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/
Related
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.
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?
Is there any way to run a user script without running it through Greasemonkey/Tampermonkey?
I know its a simple question but I can't find any information on this...or if it's even possible.
Can the user script be edited so it doesn't rely on Greasemonkey?
It's up to the browser you are using to enable support for running arbitrary javascript on page load.
Chrome has limited userscript support, but is nowhere near as easy or powerful as Tampermonkey.
Tampermonkey and Greasemonkey (and other browser extensions) were created to address the userscript need.
You do have options for running javascript after a page has loaded though. You can use the developer tools console or you can create a Bookmarklet.
On firefox:
You can use the Scriptish addon (an alternative to greasemonkey for automatically running userscripts).
There is the Developer Scratchpad for editing, saving, loading and running scripts (and userscripts) manually. Also, can be applied on either the current document or browser chrome. Accessed via shift-F4 or Developer > Scratchpad.
And then there is also GCLI (Graphical Command Line Interpreter) which you can write routines for via a mozcmd file and is run manually. You'll need to modify the userscript a bit to access window, document objects. Accessed via shift-F2 or Developer > Developer Toolbar.
This one is a bit more involved, but if you want to go the addon route, you can write an addon using the Addon SDK, and use the page-mod API which injects a userscript into a page automatically.
In Google Chrome or Firefox you can open the DevTools (e.g. by right-clicking the page and selecting Inspect) and then paste the code in the Console tab and press Enter to run it.
In Google Chrome DevTools you can also create a js snippet and run it on demand whenever you need it.
You can also use Chrome DevTools Snippets:
Right-click anywhere on the page and select Inspect.
Select the Sources tab — you will see a number of subtabs: Page, Filesystem, Override, Content scripts and finally Snippets (you might need to click >> in order to see it).
Click the plus button ➕ to add the js code, and use right-click > Run to execute the code.
NOTE: If the original script uses extra js libraries (jquery, etc) and the libs are not already preloaded on the page, then you'll need to load them yourself (see this).
Unlike the code you run from the Console, you can set breakpoints in your JS snippets.
I found the script file inside the Resources tab and not inside the Script tab and hence, when I search for the particular function inside Script's tab, it doesn't return result as shown at
How to search all loaded scripts in Chrome Developer Tools?
I want to debug the Resource script file with Chrome Developer Tool, how will I be able to do that.
Unfortunately, you can't debug a script in the Resources tab, so you have to locate the script by name in the Scripts tab.
I am debugging some 3rd party app and I would like to dynamically reload/replace some of the content of the tags, however by inspection properties like innerHTML are not set and I can't see anything from the javascript developer console that would suggest a property of method to get the javascript content.
The file is dynamic so re-downloading the file it not suitable in this case.
There are some other questions on SO which address this problem with no good answer for me, for example it is suggested to pull the content again using an XMLHttpRequest or some jQuery. However this is not suitable for my purpose.
How can I get the content of the file specified as the 'src' of a <script> tag?
However I can see that google chrome can inspect the loaded source content of the script tag in the developer console, here is a screenshot;
Any idea how it is done? I am happy to use the google chrome devtools, or some platform/browser specific extension as I am just using this for debugging.
I presume it is accessing some local cache of the downloaded src, but I would also expect that cache file or value is inspect-able from google chrome somehow...?
DevTools are deeply integrated into the browser and do that with help of C++ code in WebCore. In your case DevTools just be notified when browser makes a request, receive the response, receive the data etc.
Chrome DevTools AKA Safari Web Inspector has two parts.
Backend (~26kloc of C++ code) and Frontend (55kloc of js code).
You can see the API between WebCore and DevTools bakend at InspectorInstrumentation.h.
Also there is an API between Backend part of DevTools and Frontend part of DevTools.
It is described in Inspector.json. You can use this API and write your own Frontend or implement an extension which does something with help of DevTools backend.
The docs at the project's documentation page.
The latest video about the project at Google IO 2011.
#cwallenpoole tells how to get the js code.. simply open it in browser and if it is minified simply include (copy contents of js file) it in a script tag in html doc, go to chrome dev tools, open the scripts pane and navigate to the copy pasted script source and press the curly brackets at the bottom bar of dev tools and see the magic :)
You can get the source of any JavaScript file by simply going to that URL -- this is one from StackOverflow: http://cdn.sstatic.net/js/stub.js?v=845b73ac2eff
The problem, of course, is that it is minified when viewed that way, which leads to long, annoying headaches, but it is still accessible.