I have a scalajs file, generated by sbt fastOptJS.
Google Chrome says:
Source Map detected. Associated files should be added to the file
tree. You can debug these resolved source files as regular JavaScript
files. Associated files are available via file tree or _P.
However, I only see the transcompiled code, instead of the source scalajs code. How to see the scalajs code in Chrome?
I just ran into this issue and the part that confused me is that the wording leads to to look for where Chrome is hiding the .map files, except it won't show you those. Instead, it has already rendered the data from those sourcemaps as a folder containing readable sources.
I'm not sure how you'd predict what that folder's name would be, but if you check out this SO question about the same Chrome issue (though it's about webpack vs Scala.js) you can see that all the readable sources were available in a top-level folder named "webpack", so for your project I'd look for a folder with a name like "Scala.js".
Chrome could definitely be more helpful here, but for the price I can't complain.
Related
Dragging a local folder of files into the devtools adds them to the workspace so that you can persistently edit them. I just discovered the feature. However my files are all Babel transpiled and then I edit a file and hit cmd-s to save the changes Chrome checks the source and trips over es6 import statements with the error: Unexpected token import
Is there a way to make chrome not check the syntax? If it just edited the file without trying to compile it, Babel could pick it up and inject the changes via hot module replacement probably.
I recently watched this presentation named "Debugging the Web" on the new Chrome devtools. At around 15mins he talks about this subject.
Before you could make it work with proper configuration. With this update it should work out of the box!
Dear Haskell community I have written my first gui application and decided to use
threepenny-gui to do so.
The task is the following search the files in a given folder for matches and provide links to open those files. In addition I made nice parse and render function as the files (mostly) have a special formatting.
But now I have stumbled upon a problem - most browsers prohibit links to local files by href="file://localhost/home/user/folder/file.pdf" being opened, for security reasons, which I do understand and find completely sensible.
I tried to use href="./file.pdf" when the program and the file are in the same folder, which also doesn't seem to work.
The code of the whole application is available at github/epsilonhalbe, I run it in a folder and access it via a browser at localhost:100000
The HTTP server provided by threepenny-gui will serve up static content from the directory you specify in tpStatic. Put your files in that directory, and make your links' paths be relative to it, and you'll be good to go!
As of threepenny-gui-0.4.*, there are also two functions loadFile and loadDirectory that can be used to serve a local file or directory at an automatically generated URL. This can be useful if the tpStatic field is not enough.
In the google chrome version 30.0.1599.101 m I am not able to save the changed js file.
On saving the js file I got yellow triangle symbol with "change to this file were not saved to file system" message.
I know this used to work in older version
I am using windows-7 64 bit
Click on the cog in the developer tools window (lower right corner)
Go to workspace and add the directory which you would be working on.
This is to accidentally prevent you from modifying files that you did not intend on changing.
Happened to me too. After picking the workspace directory, I also mapped the file from the "Source" panel of Devtools to its filesystem equivalent (using right-click on the file, from the file tree). It solved my problem.
In chrome > 63, accepted answer option is disabled.
In later should be done through workspaces.
Tonight, I accidentally managed to fix this problem, just open the file on the disk and save it with a simple change even with a space.
Refresh the page in Chrome, Chrome will link it(The file) to the disk.
Using Ctrl + F5 to clear the browser cache worked for me.
I found nothing in "workspace" that seemed relevant, and other things people listed didn't help either. What helped was to go in dev tools, where it says Pages, Sources etc., there is also Overrides (duh :)), I chose it, it said "Select folder for overrides", I did, and then also clicked "Allow" on Chrome asking for confirmation. That's it, after that I was able to save the files, the overrides worked.
Ok, my case might be a bit different but I will share my experience on what I was facing that caused to this warning and how I solved it.
I was trying to check a certain strange behavior on a React app for video streaming, so I opened up Developer console, enabled local overrides and tried editing the js file, immediately upon saving I got the warning “Changes to this file were not saved to file system”.
Note the message at bottom right “Source mapped from app.bundle.min.js”, this indicated that this is not an actual file but a mapping from the app.bundle.js (Webpack bundle)
So I moved to editing the app.bundle.min.js, I searched the appropriate string I was interested in from the mapped file (react-dom.production.min.js) and searched it in app.bundle.min.js
Again I got the same warning but I noticed the “app.bundle.min.js” file was fetched using a url parameter ?v=4900, I decided to remove it to check if that was the culprit causing the issue, to achieve that I modified the index.html file and edited the script tag that was fetching the js file from
<script src="libs/app.bundle.min.js?v=4900"></script> to <script src="libs/app.bundle.min.js"></script>
After that I forced refresh the page (Shift+F5, normal refresh didn’t work), tried modifying and saving and Jackpooot!! (Take away: You can’t override files fetched with a url parameter). I then was able to beautify, modify and override the app.bundle.min.js implementation and achieved what I wanted.
On Chrome Version 109~ :
Go to F12 > Sources Tab > Overrides (You may need to click the chevron next to Page)
Select/Create a folder to contain Overrides
You can now right-click a file or editor window & save it for Overrides
Image of sources tab where Overrides is located
Something to note: if you are making dynamically loaded JS available in devtools via the helpful: //# sourceURL=Example.js comment, this network to local mapping will not work.
Note: Notice the "//# sourceURL=dynamicScript.js" line at the end of dynamicScript.js file. This technique gives a name to a script created with eval, and will be discussed in more detail in the Source Maps section. Breakpoints can be set in dynamic JavaScript only if it has a user supplied name.
https://developer.chrome.com/devtools/docs/javascript-debugging
When you're using sourceURL, you can't actually find the respective JS file in the Sources tree where you might expect it to exist. It is available to open via the "no-domain" tree, however (or quick open with CTRL/CMD+P).
I'm still looking for a solution.
The easiest solution I found to this problem:
(keep in mind, I was manipulating an html page that lives on my machine)
open the associated html page from the command line so the page displays
for mac, that's simply $ open <name>.html
open Dev Tools
open Sources tab
in Page, open a new .js file there with whatever name you need
write in some text and save
This worked for me. Yes, I had to create a new .js file, but my directory locally recognized it was there when I pulled it, and my editor was updating in real time with the dev tools each time I saved either. At that point, my editor and the dev tools source tab had become one thing.
Currently on Chrome 100.0.4896.60 (Official Build) (x86_64).
I've got a js file with source maps; the override has always been spotted.
I'm able to override the map file (which won't work though for the debugging purpose) and the index.html file.
Apparently my issue is related to minified js with source maps.
Seem to work in relation to the chrome version installed.
I tried the following attempts but didn't work:
remove cache
disable / enable override
add the dir to the workspace
install chrome canary
To debug then I've tried:
build my file.min.js to test. In my case was production/file.min.js
start a npx http-server in production (cd production && npx http-server) which open to http://127.0.0.1
override index.html to consume http://127.0.0.1/file.min.js
Interesting considerations:
When i was doing basic overriding i had to replace the file manually all the times.
Now, I've got a watch task going on and i can basically refresh the page.
I can see as well the source map update.
It's simple! Right click on your page, Go to Inspect, go to the Network tab and tick the check box 'Disable cache'. Reload the page and you will see the effect.
I'm trying to get TypeScript source debugging working in Chrome, but I'm running into two specific and perhaps related problems.
The first is that the comment generated by the TypeScript/WebEssentials compiler that's supposed to identify the location of the source map file looks like this:
//sourceMappingUrl=MySourceFile.js.map
But Chrome won't read that file. It seems expect that the comment will look like this:
//# sourceMappingUrl=MySourceFile.js.map
If I manually change the comment to that, and refresh my page, then magically the references to all the .ts files show up as sources in the Chrome Developer Tools.
However, that leads to my second problem, as the files don't actually get loaded. The .ts source file that Chrome should be trying to download is http://localhost/MySourceFile.ts, but the one that it's actually trying to download is http://localhost/C:/source/web/MySourceFile.ts. That sort of makes sense, as the opening attributes of MySourceFile.js.map look like this:
{"version":3,"file":"tmp1523.tmp","sources":["C:/source/web/MySourceFile.ts"
But that obviously doesn't work with Chrome, as it interprets the source-map location to be entirely relative, and IIS (quite correctly) won't serve up any URL looking like http://localhost/C:/source/web/MySourceFile.ts.
So, with respect to these two problems, is it Chrome or the TypeScript source-map feature that's doing it wrong? And what's the recommended way of doing this?
I'm using Chrome 25.0.1323.1 dev-m, with TypeScript 0.8.1 and WebEssentials 1.8.5.
This is an issue with version 1.8.5 of Web Essentials (the version currently available from the Visual Studio Gallery). The latest nightly build (at time of writing http://madskristensen.net/custom/webessentials2012.vsix) fixes the problem and generates the map linkage correctly.
I'm not sure in which languages those extensions are, I think the are written in Html, Javascript or JSON. As far as I know they are "compressed" in a .CRX file.
It is possible to directly modify the html, js, json of a Chrome Extension (or whatever language they use)?
Installed Chrome extension directories are listed below:
Copy the folder of the extension you wish to modify. ( Named according to the extension ID, to find the ID of the extension, go to chrome://extensions/). Once copied, you have to remove the _metadata folder.
From chrome://extensions in Developer mode select Load unpacked extension... and select your copied extension folder, if it contains a subfolder this is named by the version, select this version folder where there is a manifest file, this file is necessary for Chrome.
Make your changes, then select reload and refresh the page for your extension to see your changes.
Chrome extension directories
Mac:
/Users/username/Library/Application Support/Google/Chrome/Default/Extensions
Windows 7:
C:\Users\username\AppData\Local\Google\Chrome\User Data\Default\Extensions
Windows XP:
C:\Documents and Settings\YourUserName\Local Settings\Application Data\Google\Chrome\User Data\Default
Ubuntu 14.04:
~/.config/google-chrome/Default/Extensions/
I searched it in Google and I found this:
The Google Chrome Extension file type is CRX. It is essentially a compression format. So if you want to see what is behind an extension, the scripts and the code, just change the file-type from “CRX” to “ZIP” .
Unzip the file and you will get all the info you need. This way you can see the guts, learn how to write an extension yourself, or modify it for your own needs.
Then you can pack it back up with Chrome’s internal tools which automatically create the file back into CRX. Installing it just requires a click.
A signed CRX file has a header that will cause most/all unzippers to barf. This is not the easiest way to go about it, but here's how to do it from a bash command line.
The basic idea is to find where the original unsigned zipfile begins, then copy the CRX file to a zip file but exclude the CRX header.
hexdump -C the_extension.crx | more
Look in the output for the start of the zip file, which are the ASCII bytes "PK". In the sample I tried, the PK was at offset 0x132. (From reading the CRX spec, I think this number will vary from file to file because of different signature lengths.) That number is what we'll use in the next step.
dd if=the_extension.crx of=the_extension.zip bs=1 skip=0x132 (For the skip parameter, substitute the offset you found in the previous step.)
Now unzip the .zip that you just created.
Fiddle with the files in the unzipped directory, then either install the unsigned/unpacked extension into your Chrome installation, or else repackage it just as you would any other Chrome extension.
I'm sure that there is a more concise way to do this. Bash experts, please improve on my answer.
Note that some zip programs have trouble unzipping a CRX like sathish described - if this is the case, try using 7-Zip - http://www.7-zip.org/
I have read the other answers and found it important to note a few other things:
1.) For Mac users: When you click "Load unpacked extension...", the Library folder is by default hidden and (even if the Show Hidden files option is toggled on your Mac) it might not show up in Chrome's finder window.
2.) The sub folder containing the extension is a random alpha-numeric string named after the extension's ID, which can be found on Chrome's extension page if Developer flag is set to true. (Upper right hand checkbox on the extensions page)
(Already said) I found this out while making some Chrome themes (which are long gone now... :-P)
Chrome themes, extensions, etc. are just compressed files. Get 7-zip or WinRar to unzip it. Each extension/theme has a manifest.json file. Open the manifest.json file in notepad. Then, if you know the coding, modify the code. There will be some other files. If you look in the manifest file you might be able to figure out what the are for. Then, you can change everything...
.CRX files are like .ZIP files, just change the extension and right click > Extract Files and you are done.
Once you have extracted files --> modify them and add to zip and change extension back to .crx.
Other way around --> Open Chrome --> Settings --> Extensions --> Enable Developer Options --> Load unpacked Extension (modified extracted files folder) and then click pack extension.
Source
Now Chrome is multi-user so Extensions should be nested under the OS user profile then the Chrome user profile, My first Chrome user was called Profile 1, my Extensions path was C:\Users\ username \AppData\Local\Google\Chrome\User Data\ Profile 1 \Extensions\.
To find yours Navigate to chrome://version/ (I use about: out of laziness).
Notice the Profile Path and just append \Extensions\ and you have yours.
Hope this brings this info on this question up to date more.
It's possible to modify the code of .CRX extension, because it's a simple .zip archive. You can download extension, extract it's source code, modify it (test and debug it as it's on your side), and package back into .CRX file.
I googled out this tool to simply download .CRX extension and extract the source code and it worked for me: http://crxextractor.com
Everything it does is parses .CRX file format and extracts actual .zip containing the source code.
If you have installed the Portable version of Chrome, or have it installed in a custom directory - the extensions won't be available in directory referenced in above answers.
Try right-clicking on Chrome's shortcut & Check the "Target" directory. From there, navigate to one directory above and you should be able to see the User Data folder and then can use the answers mentioned above