There are times when I’m working on a design and start tweaking the design in the browser by adding attributes or making changes to the content directly in the browser and wish I could make those changes permanents. Now you can 🙂
To make a local folder’s source files editable in the Sources panel:
- Right-click in the left-side panel
Add Folder to Workspace
- Choose location of local folder that you want to map
- Click Allow to give Chrome access to the folder
When I click on the left-side panel I’m show the prompt to add the folder to the workspace.
The browser will then ask you for full permissions for the workspace.
Furthermore you can inspect and edit the DOM and HTML of your page directly. Be careful as this assumes that you are at least familiar with HTML and how CSS classes and IDs affect the document’s styling
To inspect a specific element on your page highlight the element, right click and select
You can also use keyboard shortcuts to open DevTools in Inspect Element mode:
Ctrl + Shift + C (Windows) or
Cmd + Shift + C (Mac) , then hover over an element. DevTools automatically highlights the element that you are hovering over in the Elements panel.
You can edit the elements by double clicking on the element or right clicking on the element and choose an option from the list it presents (shown below).
More in depth information about what you can do and how will it help your workflow is located in the DevTools Documentation Pages