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.
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..
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/
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.
You'll have to bear with my slightly on this, but please ask if I have left out any pertinent information. I have just taken over a project to create a dashboard for my team. This dashboard has been made using a niche third-party tool that nobody here will have used before. The third party tool auto-generates some code to display "markers" on a webpage. "Markers" being some proprietary code to query a database/apply custom styling etc.
I am trying to display a webpage within the page that has been generated, and I’d like to point this to a local webpage (ie on my C drive). If I pass it an absolute path, then this results in a warning in IE9 as I am mixing data sources - a https website pointing to a http web page. It will display after ignoring the warning, but my userbase is not comfortable enough with computers to ask them to do this.
I believe if I pass it a relative path then it should work, but I can’t find out what directory to base this path off and it doesn’t appear to be anywhere obvious. So, in my current page I have an image with the web address of : https://website:8443/websitereport/images/buttons/locked.gif. What I need to know is where the “websitereport/images” folder is stored so that I can put my webpage in there to give the webpage a relative path. The HTML for this image is :
<img id="dvp_locationbar_lock" class="dvp_imagebutton" style="" dvp_title="ui.tip.lock-page" dvp_image="locationBarPageUnlockedImage" src="/websitereport/images/buttons/unlocked.gif" title="Lock this page">
What are my options for discovering where this folder is stored locally? I am running Apache Tomcat 7.0. It is not displaying if I use the path based off
C:\Program Files (x86)\Apache Software Foundation\Tomcat 7.0\work\Catalina\websitereport
of
\websitereport\page.html
And I cannot find it anywhere obvious in the Apache folder. I have tried :
Searching - no results.
Using PHP to print the current working directory - cannot find out
where to edit the webpage.
Looking at images/information on the existing webpage. They all point
to folders I cannot find.
Inspecting with firebug.
In short, you can't rely on the files being on disk at all - they might be just contained in a *.war file, containing the whole application. Or they might be generated on-the-fly, despite the name sounding like an actual file.
Also, you should not arbitrarily write within a directory even if you find it (my closest guess would be tomcat's webapps/websitereport/ directory if it exists) because nobody will know that something changed during the time since last deployment. So, on the next update of the application, you'll end up overwriting all of your changes again. You typically change the underlying application and redeploy.
You might also find a few references in tomcat's conf/localhost/ directory or even in conf/server.xml, but it all depends on how your server was administered
I installed the plugin, but when I save a file within a folder like css/style.css it won't appear in its folder structure in the sidebar.
Also, how do I set the 'global' folder location for this project? Or how to change to another project for later?
Maybe I'm missing something the tutor on tuts+ used, so any tips on additional plugins to help with these tasks will be appreciated.
I'll work to address your questions here, but I recommend creating an issue, if there really is one, on the GitHub Page (I'm also the current maintainer of the plugin and I would probably respond faster to issues on the page because I also get email notification from those).
With that out of the way, I'll start on the questions. After you create the file, can you verify it is created?That is, after you create it through the plugin, can you see the file exists outside of Sublime Text? If so, can you give me more information about your setup so I can try to recreate the issue? Note it may also be a bug within the editor itself, but for now let's assume it's not. When you are creating the file, there should be an absolute path in the status bar below the input window. It should say something along the lines of Creating file at ...
There are a number of configurations for you to manage, if you so choose. Details about these can be read about here. These can be setup as global preferences (navigate to Preferences -> Package Settings -> AdvancedNewFile -> Settings - User). This will create a file for you to place your settings. You may look at the README or the default settings to see a list of valid keys. You may also setup project specific settings, which are explained here.
The AdvancedNewFile plugin works, by default, by using the folders in the window it was activated. So by opening a new project/window, you will have a new set of top level folders when creating files. If you did not have any folders open, it will fall back to the home directory.
Let me know if I can clarify anything. I'll try to check back here, but again, creating an issue for any problems would be fastest way to notify me.