Is it possible to modify the JavaScript of a page and then reload the page without reloading the modified JavaScript file (and thus losing modifications)?
This is a bit of a work around, but one way you can achieve this is by adding a breakpoint at the start of the javascript file or block you want to manipulate.
Then when you reload, the debugger will pause on that breakpoint, and you can make any changes you want to the source, save the file and then run the debugger through the modified code.
But as everyone has said, next reload the changes will be gone - at least it lets you run some slightly modified JS client side.
Great news, the fix is coming in March 2018, see this link: https://developers.google.com/web/updates/2018/01/devtools
"Local Overrides let you make changes in DevTools, and keep those changes across page loads. Previously, any changes that you made in DevTools would be lost when you reloaded the page. Local Overrides work for most file types
How it works:
You specify a directory where DevTools should save changes. When you
make changes in DevTools, DevTools saves a copy of the modified file
to your directory.
When you reload the page, DevTools serves the
local, modified file, rather than the network resource.
To set up Local Overrides:
Open the Sources panel.
Open the Overrides tab.
Click Setup Overrides.
Select which directory you want to save your changes to.
At the top of your viewport, click Allow to give DevTools read and write access to the directory.
Make your changes."
UPDATE (March 19, 2018): It's live, detailed explanations here: https://developers.google.com/web/updates/2018/01/devtools#overrides
The Resource Override extension allows you to do exactly that:
create a file rule for the url you want to replace
edit the js/css/etc in the extension
reload as often as you want :)
In the devtools preferences check the Enable local overrides.
Go to network tab, find the file you want to edit, rigth click on it and select Save for overrides (on the sources/overrides tab you need to add a local folder)
The file appears in a new tab on the Sources tab as local copy, so you can edit this file, and after site reload the new (and edited) override file will load on the site!
I know it's not the asnwer to the precise question (Chrome Developer Tools) but I'm using this workaround with success: http://www.telerik.com/fiddler
(pretty sure some of the web devs already know about this tool)
Save the file locally
Edit as required
Profit!
Full docs: http://docs.telerik.com/fiddler/KnowledgeBase/AutoResponder
PS. I would rather have it implemented in Chrome as a flag preserve after reload, cannot do this now, forums and discussion groups blocked on corporate network :)
Yes you can eazily!
Source -> filesystem -> choose the conatainer folder -> allow access -> open your file, edit and save.
https://www.delftstack.com/howto/javascript/edit-javascript-in-the-browser/
Related
I'm working on a large project, which uses IE (IE11) to display local htm pages. (Yes, IE is required. I can't use a different browser). We aren't using a web server; everything is pulled from the local drive. No http requests are made during this.
We're planning to send parts of it out to remote locations to use on those sites. Atm I'm using a self-extracting rar, so that the htm, js, css, and media files can all be put in the proper locations. After deployment, the file structure on the remote location should mirror that of the Dev system. Everything works fine on the Dev system. However, at the remote sites some of the anchor links stop working. After some testing, it appears that if the file I'm trying to link to originated from a different computer, the link does nothing. But if I were to make a new file, copy everything from the old file to the new file, and replace the old one with the new one, the link works. The files are identical in content, but only the one that originated from the remote site works.
Link
The above would work if foo.htm was created on that computer, but not if it was created on a different computer (such as the Dev computer). This issue appears to occur with .htm/html files, as well as .css and .js files. It might also occur for media files, but I didn't check.
I imagine there is some kind of security setting or something that needs to be changed, but I can't figure out what. We plan to distribute to a lot of sites, so I can't manually fix the problem for every site.
Any idea why this is happening?
Edit: No errors pop up in the console when I click on the links. I didn't check out the network tab, since everything is local, but that might be a thing to try tomorrow. Also, I didn't know about file blocking. I'll check that too. If that were to be the case, how can I unblock the files automatically? This may be deployed to people who don't have a strong grasp of computers.
From the description of the issue, it looks like when you send the zip file to another machine then on that machine file gets blocked.
Below are some ways to unblock the file or to prevent the blocking. You can choose the suitable way as per your requirement.
The easiest way to unblock the file is to, right-click the zip file then click on properties and click on the Unblock Checkbox and click the OK button. Then after try to unzip the file. It will unblock all files together.
You can also try to unblock the zip file by using the PowerShell command below.
dir "folderpath" -Recurse | Unblock-File
Note: Make sure to run the script as an administrator.
Further, you can set a group policy to prevent blocking the file.
Group policy path:
User Configuration-> Administrative Templates-> Windows Components-> Attachment Manager
Policy name: Do not preserve zone information in file attachments
You can double click this policy and disabled it.
Note: Please note this will leave you vulnerable to malware & is not recommended..
Gurus,
I am using uipath(A Ui Based Automation Tool) to download a file from a website using chrome browser.
I want browser to not prompt before downloading and just download the file in the downloads folder.
From various posts on this website i found that there exists a file called "preferences" which can be modified to solve this problem.
Before coding further i decided to do the changes in the "preferences" file manually on multiple machines, just to make sure that the changes i do in the preferences file reflect in the chrome browser as well .
I am manually modifying values for these 2 options in the preferences file.
download.default_directory
download.prompt_for_download
When i changed value for download.default_directory(Manually in Preferences file), it reflects the same in the chrome browser settings on every machine that i tested on.
But When i change value for download.prompt_for_download, it reflected in the chrome browser settings on some of the machines while on others i found that it does not reflect in the browser and rather the preferences file also seems to have reverted back to previous values.
The steps i followed are as below..
close any running instance of chrome
do the modifications in the preference file and save it
open chrome and go to settings>advance and downloads
i see DreamCatcher pointing to a similiar situation in this post, but no answers there..
I hope I can help solve your issue or at least give you some direction :)
Option#1: Chrome Settings
Wouldn't the problem be solved by changing the settings for downloads in the browser before running the bot? https://support.google.com/chrome/answer/95759?co=GENIE.Platform%3DDesktop&hl=en
Option#2: Do it in UiPath
And the other thing, is that when the prompt (to save the file) appears, couldn't you insert the path of the file that includes the default folder to save + name file + extension? (e.g. on the save path of the prompt, use type text "c:\myDocuments\downloads\filename.ext" ? I've done this in the past with UiPath...get the prompt window, type text and just modify the string being passed to carry the path, file name and extensio...then click "SAVE" or use hotkey "Enter"(if the file requires replacement, these are another 20cents you will have to program in UiPath, but it'd doable).
Option#3: Script
Another option, which I have not done, but see my friends do is creating BAT files to reset certain browser settings or the "registry"...so what they do is that they configure the BAT to do the changes to the browser and they add an activity (in UiPath) to invoke the BAT file every time the browser is opened by the robot.
Links for reference:
https://superuser.com/questions/59465/is-it-possible-to-download-using-the-windows-command-line
https://getadmx.com/?Category=Chrome&Policy=Google.Policies.Chrome::DownloadDirectory
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 setup and use Workspaces on Canary and I'm running into a few issues.
I understand that is still under development but could someone clarify these issues i'm having aren't or are related to the fact that its still under development?
Basically I setup a workspace in DevTools, locating the directory on my file system. Do I need to put anything in URL prefix and folder path input boxes? I've experimented leaving them blank, filling them in etc, but due to the lack of documentation I'm not sure what the correct input is.
Most of the time I run my sites through MAMP so will custom server names alter the configuration?
When I then open open the page I am editing, open the dev tools, make changes in the elements styles sidebar, it doesn't save any changes to the file on my system. But then when I go into the Sources tab and locate the workspace from the slide-out menu on the left, I can make changes to the files directly there. But I have to refresh the browser to see any changes.
I know something isn't quite right because when I watched Paul Irish's little demo a while back, he was making changes in the elements styles bar and seeing the results without refresh and changes being saved automatically. How can I get that this point?
Thanks in advance.
PS. If someone could add chrome-canary and chrome-workspaces tags, that would be great.
Once you have added a local filesystem, right-click a local file in your Sources panel and choose "Map to Network Resource", then select the network resource it corresponds to. That should set up the right mapping automatically.
URL prefix and folder path should correspond to the root of your app (the root url, on the server) and the root folder of your app in the file-system respectively. Alexander Pavlov is correct - if you set the network mapping for an individual file, and restart Dev Tools, these mappings will be made for the entire map, automatically as Dev tools makes the connections. In other words, do it for one file and you may not have to fill in those fields for the workspace yourself, Dev tools will do it automatically. Very handy.
I am on Chrome Dev 27, and in the Dev Tools settings checked Disable cache. When I reload a page, Chrome properly reloads all the resources used by map page, including the .js files. However, it doesn't automatically reload the corresponding source maps .map. Monitoring the HTTP traffic between Chrome my app, on subsequent page load, I don't see any request from Chrome for the .map files. How can I get Chrome to also reload the source maps?
The issue with Chrome not reloading the .map file is that it also won't reload the file from which the .js was generated, which in my case happens to be a CoffeeScript file (.coffee), which means that when debugging, in the Sources tab I am looking at an old version of the .coffee file, even if the new code (from the .js) is running.
I had this same issue just today. The wait to solve it for me was to close the coffee file's tab under sources, go to the network tab, right click, and select "Clear Browser Cache"
This fixed it for me.
That said, the mapped files don't always get "stuck" in cache for me... Only sometimes, and when they do, the clear cache trick fixes it.
Just had the same issue and found some additional solutions:
According to this commit and this bug report for chromium, the problem is solved and should not affect one of the next builds.
A little bit simpler solution for this problem than clearing the whole Browser Cache:
Open the source map in a browser tab and do a hard reload (depending on OS, try CTRL+F5). This refreshes the file and keeps the browser cache.
An alternate way and perhaps a good practise is to hack the source map generation by adding a parameter like ?build=12345. Refer to your build tool on how to manipulte the filename of the source map.
If you have access to the server config or a .htaccess, you could set the header Cache-Control: no-cache for the source map extension like '.js.map'.
Go to settings -> Show advanced settings -> Clear Browsing Data -> Check only "cached images and files" -> Click "clear browsing data"
This will clear the source maps you have cached in the browser without deleting all the cookies.
I resolved the issue by deleting the .map file and performing a hard reload (CTRL-F5).
I didn't want to lose all my history!