I have a webpack 4 configuration that generates source maps for my app's JavaScript. While debugging my app in Chrome, the source maps get loaded so I can see my unimified code. I'll set a breakpoint in a function and in the Sources tab I'll make edits to the code. I hit CMD+S to save my edits.
Normally, I would expect Chrome to think for a little bit while it processes my edits and then I can continue debugging my session with my code changes.
But that doesn't happen. I get a little yellow icon next to my file in the Sources tab that says "Changes to this file were not saved to the filesystem". And the debugging session continues without my code changes.
I've tried different options like cheap-module-source-map and cheap-module-eval-source-map for the devtools option in my webpack config.
Any suggestions? Thanks!
I got something working!
I ended up posting my same question on reddit and got some help.
https://www.reddit.com/r/learnjavascript/comments/a98gh1/cannot_use_chrome_live_edit_with_webpack_source/
You need to add your project's directory to save changes in the
source.
Here are the steps:
Open dev tools
Click on the 3 vertical dots on the far-right beside X which brings up
a menu. Click on Settings
Click on Workspace
Add your Project's directory
Refresh the page, and you should be able to save your changes now.
Hope this helps.
Oddly enough, I was able to remove my Project's directory from the Workspace and STILL able to make Live Edits to my source maps!
I'm working on a web page project, with an HTML file and a CSS file only. I use Sublime Text 3 for a better programming environment, I also use XAMPP to debug my code and test it on Chrome.
When I'm saving my programming files, the HTML one is saving, but CSS one is not saving; I checked it in the directory and opened it to view if my editions are saved or no, they are, but they don't show up in the debug using XAMPP and Chrome.
Why aren't my changes showing up in debug?
Try deleting the Chrome Browser's Cache. It might be creating that problem
It doesn't let me comment, but this is adding onto the users answer of clearing the browser cache.
Clear browser cache in chrome: https://support.google.com/accounts/answer/32050?hl=en&co=GENIE.Platform%3DDesktop
If the issue resolves after clearing your browsing cache, what I usually do when working with stylesheets is use the Chrome browser in incognito mode, it usually doesn't store cache in that mode, so after closing the tab and revisiting, it should show all of the changes.
fisrt try to clear/delete your browsers cache and if that didnt work try the steps below.
Lets say all your css code is in a file called style.css, what you need to do is:
you can just change the name of your file to something else for example style2.css (dont forget to also change the name in html file)
or
create a new file for example new-style.css.
copy and paste all the css code that you have from style.css to
new-style.css.
and lastly just delete style.css.
after that you can rename new-style.css back to style.css Or you can
keep it like that. doesnt really matter as long as you remember to
change the link name in html as well.
It might not be the best way to solve this problem but it works.
I am trying to use devTools to modify local less file and sourceMaps to directly see the result in the page.
I've used bootstrap and the provided less files and the map file as well. I didn't modify anything to be sure that my first testing file wasn't compromising anything.
I am using the last build of the chrome browser. I have set the workspace in devTools as to made possible the edition of the source files, as well as I've checked the option allowing devTools to use sourcemap and auto-reload changing css.
When I load my page and inspect an element, the less file link is well showned in the css inspector.
However when i edit the less file directly in the devTools and save, nothing happened. the content's appearance should change.
Do you have some suggestions ? something i may do wrong ?
I finally understood that devtools is not processing less files but rather refreshes the page whenever the less files are being modified externally.
Technically the less files are being watched by a program (e.g. grunt-contrib-watch module) and when they are modified the compilation is generating the stylesheet again which is spied by devtools and consequently refreshes the page.
The modification of the less files themselves in devtools is made possible by adding the less files in the devtools workspace.
More informations following the links :
grunt-contrib-watch : https://github.com/gruntjs/grunt-contrib-watch
devtools : https://developer.chrome.com/devtools
less : http://en.wikipedia.org/wiki/Less_(stylesheet_language)
If I am trying to edit some CSS in a huge project using the built-in developer tools in Firefox (which is accessed by right click and then selecting Inspect Element), is there a way to make those changes permanent?
Actually there is a big number of style sheets and and I could not locate this one property in them? I just could not find the file which contains this property, so I want to make permanent changes to the CSS from within the browser. Is there a way?
EDIT:-
To set up in Chrome first you have to add your project file to a "Workspace", Go into dev tools Ctrl+Shift+I then click on the settings gear and on the left yoou should see Workspace.
After you have added your Project folder into a workspace close out of options and click on the "Sources" tab (still in dev tools)
Now load up your index.html from your LocalHost like you normally would. In the sources panel you should see the currently loaded page and its resources. Right click on your .css file and click "Map To File System Resource" it will bring up a search box where you can search for the corresponding .css file from your actual project folder (that is now part of a workspace in Chrome). Once you make the link Chrome is smart enough to link up any other CSS and HTML files that are in your Project Folder.
Now you can make changes in the Elements tab in Chrome Dev Tools and they changes will persist. Also in the ELements tab it will show you what css file and what line any given Style is originating from!
The best thing about this is if you use Sass or Less then it will map your Scss files back to the CSS styles being processed in Chrome. (please note if using Sass and Less you have to have CSS source maps turned on)
If you don't want to do this by hand, there is a plugin for FF called Stylish that allows you to define rules-based style tweaks.
EDIT
I mention this only because it allows you to publish a set of style changes that any Firefox client can pick up and install to a specific installation. Since one can't "permanently" change the contents of remote style information, the only solution is to manipulate it on a semi-permanent basis on each user-agent that needs the changes.
You can use the Web Developer Toolbar for this matter. By going to CSS menu and then to 'Edit CSS' where you can edit and save your changes. Il also provides tools for identify which files are relevant and modify them manually. Also you may try Firebug extension where you can do similar things.
Links to both here:
https://addons.mozilla.org/firefox/addon/web-developer/
https://addons.mozilla.org/firefox/addon/firebug/
If you have installed Firebug you could install cssUpdater to simplify the process of saving changes.
https://addons.mozilla.org/firefox/addon/cssupdater/
You can take a look at userContent.css:
http://www-archive.mozilla.org/unix/customizing.html#usercss
How to save CSS changes of Styles panel of Google Chrome Developer Tools?
At tool's website it's mentioned that we can see all change in resource panel
But I'm working locally on a CSS file but changes are not showing in Resource panel for me
By the way Do you know any add-ons , tools to save css changes of Chrome Developer tools?
I know for Firebug there are many https://stackoverflow.com/search?q=firebug+CSS+changes+save
You can save your CSS changes from Chrome Dev Tools itself. Chrome now allows you to add local folders to your Workspace. After allowing Chrome access to the folder and adding the folder to the local workspace, you can map a web resource to a local resource.
Navigate to the Sources panel of the Developer Tools, Right-click in the left panel (where the files are listed) and select Add Folder to Workspace. You can get to a stylesheet in the Sources panel quickly by clicking the stylesheet at the top-right of each CSS rule for a selected element in the Elements panel.
After adding the folder, you'll have to give Chrome access to the folder.
Next, you need to map the network resource to the local resource.
After reloading the page, Chrome now loads the local resources for the mapped files. To make things simpler, Chrome only shows you the local resources (so you don't get confused on as to whether you are editing the local or the network resource). To save your changes, press CTRL + S when editing the file.
p.s.
You may have to open the mapped file(s) and start editing to get Chrome apply the local version (date 201604.12).
DevTools tech writer and developer advocate here.
Starting in Chrome 65, Local Overrides is a new, lightweight way to do this. This is a different feature than Workspaces.
Set up Overrides
Go to Sources panel.
Go to Overrides tab.
Click Select Folder For 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. In the GIF below, you can see that the background:rosybrown change persists across page loads.
How overrides work
When you make a change in DevTools, DevTools saves the change to a modified copy of the file on your computer. When you reload the page, DevTools serves the modified file, rather than the network resource.
The difference between overrides and workspaces
Workspaces is designed to let you use DevTools as your IDE. It maps your repository code to the network code, using source maps. The real benefit is if you're minifying your code, or using code that needs to get transpiled, like SCSS, then the changes you make in DevTools (usually) get mapped back into your original source code. Overrides, on the other hand, let you modify and save any file on the web. It's a good solution if you just want to quickly experiment with changes, and save those changes across page loads.
New versions of Chrome have a feature called workspaces which addresses this issue. You can define which paths on your webserver correspond to which paths on your system, then edit and save with just ctrl-s.
See: http://www.html5rocks.com/en/tutorials/developertools/revolutions2013/
I know it is an old post, but I save it this way :
Go to Sources pane.
Click Show Navigator (to show the navigator pane on left).
Click the CSS file you want. (It will open in the editor, with all changes you made)
Right click on editor and Save your changes.
You can also see Local Modifications to see your revisions, very interesting feature.
Also work with scripts.
You're looking in the wrong section of "Resources".
It's not under "Local Storage", it's under "Frames":
The above screenshot shows a diff of the original styles against the new modifications made in the devtools. You can right-click the item in the left pane and save it back to disk.
Tincr Chrome extension is easier to install (no need to run node server) AND also comes with LiveReload like functionality out the box! Talk about bi-directional editing! :)
Tin.cr Website
Chrome Web Store Link
Andy's Blog Article
Now that Chrome 18 was released last week with the required APIs, I published my chrome extension in the Chrome web store. The extension automatically saves changes in CSS or JS in Developer tools into the local disk. Go check it out.
UPDATE 2019: As other answers are bit outdated, I'll add updated one here. In latest version there's no need to map the chrome folder to filesystem.
So, suppose I have a web folder containing HTML,CSS,JS files in desktop which i want to be updated when I make changes in chrome:=
1) You'd need a running local server like node etc, alternatively this vscode extension creates the server for you: live server VSCode extension, install it, run the server.
2) load the html page in chrome from running local server.
3) Open devTools->Sources->Filesystem->Add folder to workspace
4) Add the folder which is used in running local server. No additional mapping is required in latest chrome! Ta-da!
More on it Edit Files With Workspaces
Note that the changes made on the styles tab will NOT reflect on the filesystem files.
Instead you need to go to devtools->source->your_folder and then make your changes there and reload the page to see the effect.
As long as you haven't been sticking the CSS in element.style:
Go to a style you have added. There should be a link saying inspector-stylesheet:
Click on that, and it will open up all the CSS that you have added in the sources panel
Copy and paste it - yay!
If you have been using element.style:
You can just right-click on your HTML element, click Edit as HTML and then copy and paste the HTML with the inline styles.
FYI, If you're using inline styles or modifying the DOM directly (for instance adding an element), workspaces don't solve this problem. That's because the DOM is living in memory and there's not an actual file associated with the active state of the DOM.
For that, I like to take a "before" and "after" snapshot of the dom from the console:
copy(document.getElementsByTagName('html')[0].outerHTML)
Then I place it in a diff tool to see my changes.
Full article: https://medium.com/#theroccob/get-code-out-of-chrome-devtools-and-into-your-editor-defaf5651b4a
To answer the last part of your question about any extensions that can save changes, there is hotfix
It allows you to save changes from Chrome Dev Tools directly to GitHub. From there you can set up a post-receive hook on GitHub to automatically update your website.