I routinely modify Javascript files directly from Chrome Developer Tools. I am looking for a way to list all the modifications that I have done on a page.
I know Chrome highlights the tabs where modifications have been done. What I would rather want is a diff between what was originally loaded and the current state.
I can't simply save the files to disk as I have a complex build process generating these files.
You can right-click in the source of any script file and select "Local modifications...". This will allow you to see a history of the changes you've made:
Chrome developing mode-> Sources -> select your .js file -> Right Click -> Select Local Modification -> Check History Tab
Related
I am trying to experiment with a website by changing some of its javascript code. The steps that I am following are:
Open up Chrome Dev Tools and then navigate to the sources tab.
Add a folder to the workplace.
Right click on the javascript file that I want to alter and select Map to File System Resource.
Select the matching javascript file in the new folder that I added.
However, when I make changes to the javascript file in the new folder and reload the webpage, the changes do not appear. The changes are also not present when I open up dev tools and look at the javascript file. Am I missing something ?
refresh the cache when you reload with CMD+Shift+R if you're on Mac. On windows i think it's Ctrl+Shift+R
I am debugging a Javascript file that is deeply nested in the source tree. The URLs I have to drill down through are extremely hard to memorize since the JS source I want is loaded inside an iFrame that has been loaded by an Add-In API.
Is there a way to "pin" or "bookmark" a reference to the Javascript source from within the Chrome debugger, so I don't have to drill down the sources tree every time I reload the web page just to get back to that source file again?
There's a few different options, but there's no specific "pinning" feature in DevTools.
The files opened in the Source tab persist between browser sessions, so you could just keep it there and not close it. That's the first obvious thing I noticed.
If you know the file name, use Cmd+O (Mac) / Ctrl+O (Windows/Linux) to open the 'Search by filename' box, and then you can open the file directly instead of via the tree.
If you want to actually debug the file, do what Christiaan suggested, and add a debugger; statement to your source code. This will automatically open the file in the Sources panel, and break on whatever line you put it on. You can also just use Chrome's built-in breakpoints. These will persist until you disable or remove them, and it doesn't involve modifying any code.
Use Workspaces to map the network path (e.g. a server running locally or externally) to a folder on the file system. Instead of adding the whole app folder, you could select a particular nested folder. This will then appear in the Filesystem section within the Sources tab. You can easily jump to the file at this point. This is one I came up with just now so not fully tested.
I don't have a great example of this, but below I have mapped the css folder.
In the Filesystem section, I see all the files in use from within that folder, not the whole source tree.
If you add the below special comment to line 1 of your JavaScript file, then press Ctrl + P to search for it and open it up, it will effectively be pinned in the sources tab until you close it. Even if you close DevTools, or restart your computer, or update the javascript file, it will persist.
//# sourceURL=myJavaScriptFile.js
Note: If you add a space after the slashes like this '// # sourceURL=myJavaScriptFile.js' it will not work. - I fell into that trap before.
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.)
If I have an UI view in view.js and open that one in chrome the script gets downloaded and cached (view.js doesn't get downloaded on second visit) DESPITE having cache disabled (in dev tools, cache killer, whatever I'm using).
If I work with the editor of dev tools, change something and save it (editor background turns red) I can open view.js again and the changes were made because Chrome uses the edited view.js.
How can I force Chrome to always download the js files so I can change my files in Eclipse, save them and the changes appear on re-opening view.js. I don't want to reload the whole page, just want to re-open the view.
I hope it is specific enough.
Add to filename some randome has ( for example timestamp ) - on every load of page url become unique - thus cache would be disabled
You can tell browsers that you want them to prefer the current (online) version of the files. You can also tell them that you want all the files not included in the manifest to be downloaded from the server.
SETTINGS:
prefer-online
NETWORK:
*
I'm working on a monitoring system. It has a jquery-ui graph! I want to edit that graph whenever it loads on my browser! and I do not have access to the source!
what can I do?
How do you not have access to the source if it's loading on your screen? I'm sure you could WireShark the data that's coming across to your computer if for some reason you're unable to do it through your web browser.
You should be able to save the page locally and work on it from your local PC. This is going to be best if you're going to make a lot of changes and want to keep your changes saved.
You can also use some developer tools that are built into your web browser. For example, with the Chrome Inspector (F12) you can right click under the Elements tab and Edit Attributes or Edit as HTML, and make changes to inline CSS and JS. Take a look under the Sources tab for included files.