I'm trying to debug a javascript file, but whenever I use the Chrome Devtools, a random old JS file opens instead. I haven't been able to move on with my project because of this. Does anybody know why it won't read the current file? You can see down on the gif that I am using index.js but every time I debug it opens a random file and reads that instead.
GIF OF THE ERROR
It could be a problem with caching. Try using a silent browser and disabling caching
enter image description here
The browser caches your old JS file. So what you can do on Chrome is perform a hard refresh with CTRL + Shift + R while the dev tool is open.
If your project uses webpack. Make sure you keep it running. The VScode extension LiveServer will take changes but will only work with the JS file you had the last time you ran it.
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'm making changes locally to my code. When I save the code in Atom, then refresh over localhost, the changes are not being displayed in the browser. What are the possible reasons for this?
Not really a solution, but mistakes that I sometimes do:
1. Cross check carefully if its the same file that your are editing, and the one that's run in the terminal, and browser.
2. Also carefully check, when you save the file, is the terminal refreshing the client, or restarting the server.
I have highlighted carefully, because it's happened to me, and I have seen it happen with my colleagues.
try ctrl+f5 to refresh browser.
or open dev tool in browser then check "disable cache" on settings (chrome)
If clearing cache resolves issue, then from next time you can use browser in incognito, or use this chrome ext https://chrome.google.com/webstore/detail/cache-killer/jpfbieopdmepaolggioebjmedmclkbap
Clear cache in the browser, check to make sure Atom is saving the file in the right place and not else where on the computer other things to try is edit the file in notepad or notepad++ and save it and see if it changes. As it could be atom its self not working correctly..
My problem is when I edit my previous javascript or css file link to my html file, the function/code that I add are not functioning even I delete the whole code in my js file. The previous code only is functioning.
It might be your cache were not deleted ,that's why it still using your previous javascript file.
To fix that:
Empty your cache
(In GoogleChrome ) Open developer tools( or press F12 ) then You can right click on
refresh and select Empty Cache and Hard Reload
Your updated javascript now will be loaded.
CLEAR GOOGLE CHROME CACHE
CLEAR FIREFOX CACHE
CLEAR INTERNET EXPLORER CACHE
What server software are you hosting with? Apache? Express/node?
I noticed depending on how I configured something like forever or nodemon to host my express sites, it did not reflect changes when not using grunt. I had to restart them to get them to use the newly changed files.
Did you use a Yeoman generator?
I'm trying to debug remote javaScript using Google Chrome inspector. I recall in the past being able to:
1) Edit remote javascript using Chrome Inspector
2) 'Save' the change using (cmd + s)
3) Test the effect the the altered javaScript on the page
Now when I try to 'save' the change I get a yellow warning icon in the 'tab' that says
"Changes to this file were not saved to the file system"
Can anyone help me with this, please bear in mind that I'm working with remote code (not trying to alter local files) and I do have the developer tools extension installed.
The changes were not saved to disk because you obviously can't access the remote js file, but they will take effect when javascript will reach to these lines of code.
You can add a breakpoint before the place you want to dynamically add your code, reload the page, add the code you want, click ctrl-s. Ignore the warning you mention about the file system and enjoy.
So you can follow these steps and just ignore the warning.
For anyone who stumbles across this, as I did...
For Local Files
You may need to run chrome as Administrator. Or in my case (Ubuntu) as root user.
sudo google-chrome --no-sandbox
Then you can save the files within devtools.
UPDATE: Per the link below, the docs have moved here.
You have to have Workspaces set up in order to do this. Read the docs on how to use Workspaces: https://developer.chrome.com/devtools/docs/workspaces
I have a solution which has 20 projects. One of them is a website project.
When I try to open a js file in the website project for the first time, it opens fine.
But when I try to open any of those js files, it gives me this error:
---------------------------
Microsoft Visual Studio
---------------------------
The document 'X:\\....path.js' is already open. Do you want to close it?
---------------------------
Yes No
---------------------------
I tried to search on forums, internet, MSDN and everywhere, its quiet annoying.
Any help would be greatly appreciated.
Thanks
I only have some tips:
You can use the handle utility of sysinternals.com to find out if and which process is holding the file open. This utility can also close such a handle with violence.
I guess that X: is a network drive. Is it possible that this file is actually opened from a different computer? It might be in use i.e by a Web-test server?
Did you try to open this very file with a different program (i.e. notepad) on the same machine, when the project is loaded in VS?
The error message is shown when the same file is open in the same VS instance, but with another editor (you'll see it e.g. when opening a resource file in the code editor when it is already open in the resource file editor). Did you open the file in both cases by double-clicking? Try to play around with the Open With command, which allows you to select the VS editor.
The error message is not related to another application holding the file open.
What happens when you confirm closing it? Do you have any Visual Studio extensions or add-ins installed? Try disabling all of them.
I had this issue with a TypeScript file in VS2013 Premium.
Restarting VS and then the machine didn't prevent the issue. Opening VS in Safemode didn't help. The only solution I found was position my mouse over the 'X' on the document the message box was complaining about (much easier with a trackball than a mouse) and open the solution with the keyboard, ensuring the pointer was in the right place to close the document as soon as it rendered and before the message box was shown.
UPDATE: A simpler fix is to delete the .suo file. That lets you open the solution with no open files.