Breakpoints in embedded scripts - javascript

I'm trying V8 out in a small test environment, where I have a custom html, with embedded JS scripts. I'm connecting to the Dev Tools trough Websocket, and its working well except for the Script debugger panel.
I'm creating the ScriptOrigin like this:
v8::ScriptOrigin{ fileNameValue, lineNumValue, colNumValue }
fileNameValue can be the same for multiple scripts, as there are many embedded scripts in a file.
The DevTools only shows one entry for each fileNameValue I submit, but it only displays the content of the last submitted script.
Is there a way to provide the full html, along with the embedded scripts, and map the scripts with the lineNum and colNum values?

Related

How to access and search code in debugger:///VM* files in Google Chrome Devtools

I want to debug scripts which are not loaded via files, meaning they loaded via eval or Native code pushed to the browser from iOS/Android.
when I write in the DevTools console (function() {debugger}()) the browser create fake file like debugger:///VM132 and you can see it in the debugger breakpoint.
I usually has lots of debugger:///VM*** "files" code but I can't access them and can't see the list of debugger:///VM script anywhere in the DevTools. the Sources panel also not showing any of those.
In addition, I use DevTools search CMD+option+F and is not searching inside debugger:///VM files.
How can I find those sources?
I notice the option in DevTools Settings under Sources -> Search in anonymous and content scripts. I get all console scripts, debugger conditional breakpoints, and injected scripts from Native App to JS.

How to add third-party scripts in a Chrome Extension that runs inside Gmail to develop a #mentions feature

I am trying to develop a #mentions feature in my Chrome Extension, using jquery atwho (https://ourcodeworld.com/articles/read/516/how-to-create-a-mentions-autocomplete-with-jquery-and-atwho). This Extension runs changing Gmail Interface. I have comment box inside a popup, which I want to have the atwho feature. What is the correct way to insert these scripts in my code? (Should I push the script in the header of Gmail, or is there some other way?). (Usually all the other third-parties scripts I use, are in a vendor.js file and are not pushed in the header of the page).
Initially, trying to insert the script in the header, I get an error that jQuery is undefined. After I also insert the script in the header of Gmail, my Extension does not load correct.

Modify HTML before Chrome native scripts

How do I modify the HTML page before any Chrome runs its scripts, or
make my script run before any source script, once Chrome gets the whole HTML plain text.
Can any Chrome API do that?

How does the browser get hold of source maps?

I am trying to understand how source maps work. I created a simple web server with one page using nodejs. Installed jQuery which comes with a minified version and source maps. I then put a script tag on my web page including the minified version of jQuery. I can now browse through the unminified code in chrome developer tools thanks to source maps. But how?
I analyze the stuff sent from the server and the source maps are not transferred. They are not shown in the network tab of chrome developer tools and they are not included in the downloaded content of the minified jquery file. The only thing is //# sourceMappingURL=jquery.min.map at the end of the minified jQuery file. How can the browser access them?
I am partly wondering because in my work I am creating an application and it would be nice to have the ability to trace errors with source maps in production. But now it seems that if I want to allow that, it also means that anyone visiting the site can get the unminified code. Is that correct or can I control how source maps are transferred to the client from the server?
Edit:
Thanks for the answers. I also did a bit more research myself logging each request the server received. If debugger tools are used, the source maps are requests at the url specified in the end of the minified file. The fact that chrome hides this makes stuff very confusing. If I block the source map from being transferred, source mapping will not work but chrome will also cache the source map. I.e. if I allow the source map, view it, then block it and view again source mapping may still work.
Source maps are indeed transferred, but in current versions of Chrome they are not shown in the Network tab. According to this answer, source maps used to be visible on the Network tab, but at some point they decided to change it so that the requests are no longer visible.
As for keeping your source maps private, one of the solutions mentioned in this answer is to create an .htaccess file that restricts source map access to clients from your local network. Another way to do it would be to set up authentication, so you have to log in to the site to be able to view the source maps or else you get a 403.
In that case the browser is requesting the jquery.min.map file relative to the src URL of the <script> element (the "source origin"). (And the source map likely embeds all of the sources in sourcesContent.) I'm not sure why it doesn't show up in the network tab (I've never checked before). In other cases the source map can be entirely embedded in the script. You could conceivably put the source files behind a URL that isn't publicly accessible, but is to you, and set the sourceRoot property of the source map accordingly. In that case you'd want to make sure your source map doesn't include sourcesContent

Javascript file reference in debugger missing

I am not exactly certain what I did to cause this, but I have been able to, up until a couple of minutes ago,debug my javaScript file(referenced using a script tag in a .aspx page I am working with) using FireFox firebug tools. Suddenly, I am unable to view the file via the FireFox script tab list. I scroll the list of script files included in my page, but I do not see the particular Javascript file I expect to be on the list. I am however, able to confirm that the JavaScript file is loaded along with the page information, under the HTML tag in firefox.
**No Javascript on this page**
If <script> tags have a "type" attribute, it should equal "text/javascript" or "application/javascript". Also scripts must be parsable (syntactically correct).
I experience similar problem when using chrome. When I pull up the entirely loaded file, I am able to confirm that my javaScript file is correctly referenced. But for some reason I am unable to verify the script is being run or debug it.
The rest of the web application works file. Problem is just with the one page.
ONE SOLUTION
I created a new aspx file. Copied over the code from the faulty page and ran it, and it worked fine on both Firefox and chrome.

Categories