Edit files in the Browser
Published:
The browser is the portal to websites worldwide, which we now just take for granted as it enables us to view and read a website, and also interact with them such as using web forms. But just a click away the browser can do so much more.
Have you ever looked at a webpage in your browser and thought you'd like to try different words on it? Well believe it or not this is totally doable with a Web API called Design Mode.
Making webpage edits
To start editing in the browser all you need to do is enable Design Mode, by default this is "off", but you can turn it on from the DevTools console.
On your chosen webpage open the DevTools by either clicking the F12 key, or with your mouse right click and select Inspect The DevTools should now be open.
Next select the Console Panel tab, then in the console type document.designMode = 'on' and press return
You should now be able click anywhere on the webpage and change the wording to see how it will look.
Don't be alarmed if you see any red squiggly lines anywhere as in this mode you can spellcheck your page too, simply right click on the word underlined and a popup menu will appear with alternative words / spellings.
Should you want to show these changes to someone else, then why not take a snapshot image using the browsers inbuilt "Web Capture". Which you'll find in the "settings list" by right clicking on the ... in the top right corner of the browser window.
Browser workspaces
Perhaps you want to make changes like above, but also be able to save them directly to the file on your local machine? Well with workspaces you can also do that in the browser too!
Though you will need to have a suitable HTML file saved in a folder on your computer that you can use. If you haven't you can download this bare HTML page and save as html into a new folder or one of your choice.
Once you have a usable file & folder on your machine you can do the following:
Open a fresh browser window/tab. Then select and open the webpage you are wanting to work on in the browser from your local files, by clicking and dragging the file into the URL bar, the page should now be visible in the browser.
Now open the DevTools again (as you did above) and select the Sources Panel tab.
Next click on Workspace in the top left corner of the panel to make sure that option is selected. (If you can only see a tab saying "Page" or nothing at all, click on the down arrow and the workspace option should appear).
Now click + Add folder this will bring up a window for you to select the folder from your local machine again.
A DevTools popup window may appear across the top of your browser screen requesting full access to "Your folder name" you will need to click the blue Allow button to proceed.
Your folder will now appear in the workspace panel below the +Add folder.
Open this folder and select the file you wish to use, which will open up the html page in a workspace panel across the middle of the DevTools. A green dot will appear on the file and the workspace tab indicating you can now work on it.
After you have made a change you can save it to the file by clicking keyboard command Ctrl + s or with your mouse right click and select Save as... then click browser window refresh and your changes should appear. A workspace file tab may appear after you refresh, simply close one and carry on working on your page.
Adding JasmineWS CSS
If you are using the bare HTML page and would like to add some base style. You can use our JWS template CSS file by linking the CDN version. Which you'll find on our Template page in the "I know some HTML & CSS" section. Simply copy and paste the link at the bottom of the <head></head> section of your HTML page.
Deleting a Workspace
When you've finished with a workspace you can remove it, by right clicking on the folder and selecting Remove from workspace, a window will then appear informing you that "This will stop syncing changes from DevTools to your sources" to confirm this by click on the blue Remove button, though don't worry you won't delete any of your files or changes provided you remembered to save first!
Using vscode.dev
Finally if you wanted a more featured editing working environment you can use vscode.dev, which uses the browser File System Access API that allows you to work with files from your own local folder like before.
To open this workspace go to vscode.dev in a new browser window/tab.
Then click the blue Open Folder button, then select the folder you are wanting to work on.
You will then be asked in a popup window "Let site view files?" confirm by clicking the blue View files button.
You will see your folder and its files listed under "Workspace", select a file and it will open the file in the workspace panel ready for you to work on.
After you have made your first change/s you can save by clicking keyboard command Ctrl + s or by clicking on the burger menu at the top of the icon panel select File then Save.
To view your page though you will have to have a second browser window/tab open, then as before select and open the webpage from your local files, by clicking and dragging the file into the URL bar.
After you have saved a change in the workspace, to view it go to the other browser window and refresh the page.