What is the "Edit as HTML" extension and how does it work?
This extension integrates browser to an external editor. With this extension, it is possible to edit an HTML node content inside a favorite external editor and see the result in the browser without the need to refresh the page. The extension tracks file changes and refreshes the node content when the temporary file content is changed. So instead of using the developer tool as an HTML editor, you can use your favorite external editor.
There are two methods to activate the extension. 1) Click on the toolbar button and move your mouse over the element that needs editing and then left click on the element. This will open your external editor with a temporary file containing node's content. When this local file gets updated, the new content is replaced the old one in the browser and changes are visible. 2) Open the dev tools of your browser. Go to the "Elements" tab and you will see a new side pane with the title "Edit as HTML" in Elements panel. When a node element is selected, press the edit button and content will be sent to the external editor as a temporary file.
Displays a magnifying glass to pixel select a color on your screen and edit this color on a color picker interface. It supports many known color formats, the history of your selections, and direct clipboard copy. Read more here.
What command is sent to the external editor and can I change it?
By default, the path to a temporary file that has the content of the currently selected node is sent to the text editor. You can go to the options page and change this command per your needs. If this change might be useful to the other users, please share it in the review section of this page!
Why the HTML code that is sent to the editor is not formatted correctly like what I see in the dev tools?
The HTML code is exactly what the actual code looks like (the one that is on the server before browser parses it). Browsers format (prettify) the HTML code in the dev tools. You can use your editor to format the HTML code as well (you might need to install an extension for this).
What's new in this version?
Please check the Logs section.
Can I use this extension to write the entire HTML code not just for a node?
Yes, simply open the external editor and write a minimal HTML code and open that HTML with your browser. Now use the dev tools to select either the HTML or BODY element and then press "Edit as HTML". You will get the content in your external editor and all the changes will be sent back to the browser without the need to refresh the page.
Do I need to delete the temporary files that are created while editing the HTML nodes?
No, there is no need for manual removal of these files as they are stored in OS level temporary directory which will get deleted once per while by your operating system.
Is it possible to use this extension to edit an editable area like textarea element or input[type=text]?
Yes, this extension adds a new context menu item to context menu over editable elements. Use this option to send the content of an editable element to the external editor. Like HTML editing, the content is sent back when it gets saved by the external editor. Note that this extension uses TXT format when the content of an editable element is being modified.
Can I use this extension to edit external resources?
Yes, if your browser supports devtools integration, in the panel there is a button called "Convert to Local Resource". This item gets enabled on SCRIPT and LINK[type=text/css] elements. When executed, the extension fetches the remote content and then creates a new element of the same type and uses the remote content as its content. Then the remote resource is being deleted. Now you can select the newly created element from the inspection panel and edit it with the external editor as usual.
Please keep reviews clean, avoid improper language, and do not post any personal information. Also, please consider sharing your valuable input on the official store.