Currently I added sourcemap to production version of website in order to track errors/bugs from other tools (such as SEntry).
But I dont want everyone could get my website's structure on the internet. So how could I config sourcemap only visible for SEntry or some request URL?
Don't upload them to your web server.
Sentry supports uploading a source map to them directly. For Chrome Developer Tools, just right-click your minified file and click "Add Source Map".
Related
I found many projects that required a server. My question how do I start Visual Studio Code like any other jQuery/React/Angular library? How do I start it from the browser without using a server?
I know that I will need to provide the files using a script.
I don't need the extension marketplace, terminal and similar. I only need the files tab on the left, the search tab, and the editor itself. The editor is Monaco, I found out. But I didn't find something that also contains the files panel and the tabs switcher (The list of opened files).
There are projects like code-server, but it requires a server. It also should be executed by our clients, so I don't want resources or security risks on the server.
So how do I compile and embed Visual Studio Code into a Web page to be served by a static HTML server?
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.
Is it possible to load an external source-map file (JSON), not included in the minified JS file used on a website?
So far the only ways I know of to include a source-map for a particular js file is to either inline it, add a link in comments or set the path in HTTP header.
So I wonder - is it possible to load a source-map file that can't be accessed via HTTP? For instance - load it from my local drive, and point it to the js file it is supposed to be mapping?
Cheers
I know question is old, but had it myself nevertheless. Here's how you do it in Chromium 63
Open Debugger
Right-click in source code area
Select "Add source map…"
Enter URL to source map file
if browser is able to download it and process it then sources appear as entry in source tree.
PS built with hidden source (separate files, no source comment)
PPS does not matter where files are hosted, because it is URL. Must be accessible by browser.
August 2022, Chrome 104:
Open Chrome Dev Tools
Go to "Sources" tab
Find the .js file you are looking for. Click on it.
Right click somewhere ON THE SOURCE.
Find "Add source map..." option there.
(I first wrote this as a comment to the other answer, but #christian-vincenzo-traina suggested having it as a separate answer.)
When I use a XML view for a page in SAPUI5, and I open Developer Tools on Google Chrome and check, under the "Sources" tab, the directory that has the ".controller" file, I cannot see the "view.xml" file. Why does it happen? Does the browser "excludes" the XML file after it is processed by the UI5 core? Thanks in advance!
The sources tab in Google Chrome Developer tools is meant for debugging the logic of your application. It allows you to add break-points, see your calls stack and observe/tinker with intermediate variable values.
As SAPUI5 XML views don't contain any logic, it doesn't make sense to show it in the sources tab, as there is no logic to debug. You can see your XML files in the network tab though, if you just want to do some inspection on its contents.
More info on debugging using the source tab can be found here:
https://developer.chrome.com/devtools/docs/javascript-debugging
I think that the sources tab only displays some file types. It doesn't display .json files either.
You should be able to access unparsed XML files through Network tab.
I've been working through the javascript remote debug tutorials for WebStorm / IntelliJ(numbers.js)
I've managed to get remote debugging working successfully, however there is one thing that is making life difficult.
When I'm debugging numbers.js in WebStorm(I've also tested in IntelliJ and have same result) there is a little lock icon which I guess implies that the file is read only. At the moment, it is slow and painful to go full cycle on the development / deploy process of:
code modification on local file
upload
debug on locked remote fuile
switch tabs in WebStorm to local file
code modification on local file
What I want to do at least is debug on local file, so that I can make changes while debugging and then quickly upload and repeat.
# the tutorial
http://wiki.jetbrains.net/intellij/Remote_JavaScript_debugging_with_WebStorm_and_PHPStorm
the numbers.js file does not have the locked symbol in the tab like I am seeing in my locally running WebStorm.
Anyone else have this problem? Anyone advise how they got WebStorm working so they can make changes to the local file while stepping through and debugging?
Thanks
Most likely you open the file from the Scripts tab in the Debugger panel and place breakpoints there. You should place breakpoints in the original file instead.
Deployment can be automatic (on Save) or you can use In Place configuration when your server root is configured to the project folder.
Another important thing is the local file to remote URL mapping in the Debug configuration. Note that in the wiki tutorial Remote URL is set to the full URL including the http:// and server name.
With In Place deployment or with Automatic Upload and correct mappings you can debug your scripts with zero turnaround time. Make a change, switch to a browser, Refresh (file is saved automatically as Settings | General | Save files on frame deactivation is enabled by default).
If it doesn't work this way for your project, please contact JetBrains support and send a sample project to reproduce this problem, also describe your server and deployment settings.