I am trying to set up Chrome Developer Tools to edit / save SASS files of my Laravel App. Everything works fine when editing CSS via Sources Tab, however, changes made in Elements pane are not moved to mapped source file.
I was reasoning that it's because SASS path in Elements and Sources panes are not identical. However, Chrome Developer Tools Shows green circle next to file which states that style sheet is mapped to the correct file
I tried modifying SASS Sources map file, so it would include my absolute path, but no matter what Google Developer Tools ads http://127.0.0.1 to the beginning of the path.
However, I might be complete wrong.
Any guidance that would suggest me the further steps to troubleshooting the issue would be highly appreciated.
Thanks!
The Chrome "Inspect element" HTML editor is very easy to use with lots of cool features, I love the collapsible elements, highlighting, and live updates so I can see exactly what's happening. Usually when I'm writing I'll create an empty file and open it in Chrome so I can start there. Unfortunately I have to copy everything to the document whenever I want to save and if I accidentally click on a link I lose everything. Is there an extension or something I can use to save the file (Maybe even to google drive?) I've recently accidentally lost a bunch of work a couple times in a row so I need to change something. I've tried brackets, atom.io, shiftedit, and codepen but none of them have the convenience and features of Chrome's console.
Thanks
You can use the Workspaces feature to work with files from DevTools so changes will persist to your computer automatically. Works with all source file types.
Check out Snippets in Chrome DevTools. The code snippets are stored in the browser, and you can run them on any page/site. I find them very useful myself.
You see the DOM in the "Elements" panel. The page may have JS that changes the DOM Tree.
So what you see in the Elements panel is not the source HTML. Therefore you can't just change things in the elements panel and save the changes to your HTML file.
I want to know if its possible to customize the way your default google chrome look locally on your computer. I am talking from a developer's point of view and not user(ie not to change the home page by going into chrome setting).
I can change the UI by using the chrome f12 option locally. As chrome is installed on my machine then there should be an index.html or something alike file present to render chrome as it does. I want to access that file if possible.
Thanks
you might be able to find some various files, so i would suggest looking through the following folder. C:\Users\MYUSERNAMEHERE\AppData\Local\Google\Chrome\User Data\Default
or C:\Users\MYUSERNAMEHERE\AppData\Local\Google\Chrome\User Data\ as these are the ones that contain your chrome installation, there maybe another folder but this is always the one i have used when developing extensions..
Otherwise i think you will be stuck with the extension part, i myself would have a look at this if you really need.. But that could be a week before i get the chance.
If your looking to deploy a custom google chrome, so they dont need to install extensions. Try the following google term: deploy custom chrome
https://developer.chrome.com/extensions/external_extensions
But editing it directly with just finding a single html file / style i dont think is as easy as it would need to load certain objects into memory and i think they are a little more complex than a plain text file.
EDIT - Looks Like Its Extension Only Now
Had 5 minutes and did a quick google, there was a point where you could use custom style sheets for v32 and below but that was removed https://src.chromium.org/viewvc/chrome?revision=234007&view=revision
So you either need to work with firefox or build an extension.. I could not see any files/folders that would do what you need. So yea i'd start looking at extensions.
I'd like to be able to set break points on JS in individual files. I can do this to inline script in chrome with sources tab. This is isn't very helpful as I have almost no inline JS.
In firebug you have the script tab, in which you can select from all the js files on the site.
Where is Chrome's version of the Script tab in Firebug?
It is not clear what is the problem.
Chrome has DeveloperTools. It can be invoked with help of Ctrl+I (Cmd+I on Mac) shortcut or though menu.
In the DevTools window there is Sources tab that can show you the js files of the site.
You can use Ctrl+O shortcut for opening a particular file.
Or you can use sources tree pane.
If the source file is obfuscated/minified then you could pretty print it with help of a button in the status bar with curly bracers. Also DevTools supports source maps. You can set a breakpoint in the js file and do number of other things typical for an IDE.
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.