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
Related
I'm making a local web page (.html) that loads a few .js files and am having trouble using Google Chrome's Developer Tools.
Definition
The problem I'm having has to do with the Source Panel: I have one source tab open with a specific file and when I open this file by clicking the console or the source file at the left, randomly a duplicate is created instead of just redirecting it to the one already open.
Both will have the same file-path:
Both will allow me to write and save the file (even showing/hiding the asterisk correctly)
Only one of them will correctly save the contents to disk.
I have to fix it by closing both files and opening it again, but sometimes I can't see that there is a duplicated file and it causes me to fix a problem only to find out that the file wasn't actually saved, reverting completely every change I made to that file when I refresh the page.
Example of the problem
The most common appearance of the bug is when I'm doing the following:
I identify a console.warn / console.error / syntax error log in the console
I click the line that caused that log (at the rightmost of the console) and I'm redirected to the source panel, where a new source file tab opens and I begin editing it.
Somewhere in the source tabs is another source file of that same file (with the same filepath): That tab should be the one I was editing: only this original tab will correctly save changes made to the file.
I fix the random javascript problem in the file that I was lead to by clicking the console.
I hit Ctrl+S (or Right Click > Save), the asterisk that indicates a unsaved file disappears. At that point Chrome expects to have saved the file successfully, but it didn't (I can check by opening the file in Notepad)
I hit F5 to refresh the page.
Chrome loads the old, unsaved file, erasing all the changes I made in the source file.
Sometimes the very same steps doesn't create a duplicate file, but all I have to do is refresh and try again until it does. Recreating this bug is a matter of chance, I can't predict or pinpoint its causes either.
When refreshing the page with the Dev Tools open, there's a small chance that it will creates a broken mapping, where the mapped project becomes only partially mapped
even though it was fine seconds before: (only restarting chrome fixes that)
This last paragraph may or may not have something to do with the problem but I can clearly select and open the "fake" file and the "real" file even though they have the same file path.
I made this gif to show how the file paths are identical to each other in the Dev Tools: http://i.imgur.com/ULlbskO.gif
Details of the setup
I'm using the local file system (file:///) strictly, there is no localhost or server being used to host my application, it is pure HTML + Javascript.
I'm using Google Chrome 57 for Windows without any extensions, but I've been having that problem since December, 2016.
My project was mapped by adding the folder to the workspace and mapping it to a local file, which used to work in the past.
Here's a picture of my configurations: http://i.imgur.com/IEmE3zG.png
Things I've tried
Clearing Chrome's Cache
Removing the project from the Source Panel workspace and adding it again
Reinstalling Chrome
Moving the project path to somewhere else
Searching on Google
Letting go / Accepting defeat (I've grown too dependent on the tool)
Waiting 2 months for someone to have this problem too and post it somewhere in the internet
Questions I need help with
Can I minimize/fix this problem in any way?
Has anyone dealt with this before?
Does someone know if this is a Chrome bug or am I doing something wrong with my workflow?
Found the answer myself after several months working with web development.
The duplicated file has been fixed in Chrome since the time I made this question, but files keep loosing "connection" with the local file system (green dot that marks them as sync'd with local) randomly, which made me investigate and I finally found the reason:
What's happening is that Dev Tools is trying to save the file and, when it retrieves it it loads from cache (because my local web server was sending cache-specific headers), which makes the browser think that file file is not actually the one it saved, so it stops its syncronization!
To solve it, all I had to do is ensure my local web server is disabling any form of cache for my javascript files, which I can check from the network panel:
My local web server was sending cache headers for 1 hour, which made chrome open the cached file, which was different from my edited file which was an indication that the file is not the one it saved.
After changing the server to serve static content without the cache headers, everything went smoothly and files kept sync'd correctly!
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.
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
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:
*
For example I have a html file :
test
On chrome - when clicked the file downloaded to default directory
On IE - when clicked asks to open or download
how somehow when clicked, automatically open it with default program in windows
I dont have any references but i think youre not in controll of that behaviour. You can probably as well configure chrome the way it asks you before downloading and vice a verse configure IE to not ask but download the files in a certain directory.
Maybe there is a possiblity to have a java script code running on page load that initiates a download directly without any notification to the user but that wont run in any cases as well (since youre not in controll if someone switches off java script).