Advertisement |
What is the "Edit as HTML" extension and how does it work?
This extension connects your browser to an external editor, allowing you to edit the content of an HTML node within your preferred external editor. You can observe the results in the browser in real-time without refreshing the page. The extension monitors file changes, automatically updating the node content when the temporary file content is modified. This way, you can leverage your favorite external editor instead of relying on the developer tool as an HTML editor.
Available extensions:
There are two ways to activate the extension:
Video Tutorials:
recommended The "HexDump - Hex Viewer" extension for Chrome, Edge, and Firefox browsers
The "HexDump - Hex Viewer" extension provides a customizable tool for examining files in hexadecimal and binary formats, aiding tasks like file type identification using majic numbers and binary comparison. Read more here.
Is it possible to modify the command sent to the external editor, and if so, what is the default command?
By default, the command sends the path to a temporary file containing the content of the currently selected node to the text editor. You can customize this command according to your preferences by visiting the options page. If you believe your modification could benefit other users, please consider sharing it in the review section on this page!
Why does the HTML code sent to the editor lack the formatting seen in the dev tools?
The HTML code sent to the editor is a direct representation of the actual code on the server before the browser parses it. DevTools in browsers format (prettify) the HTML code for readability. If you wish to format the HTML code in your editor to match, you may need to install an extension for this purpose.
What's new in this version?
Please check the Logs section.
Is it possible to use this extension for composing an entire HTML document, rather than just for a node?
You can achieve this by opening the external editor and creating a basic HTML code. Open the HTML file with your browser, use the dev tools to select either the HTML or BODY element, then click "Edit as HTML." The content will be transferred to your external editor, and any modifications made will be sent back to the browser without requiring a page refresh.
Is it necessary to manually delete the temporary files generated during the editing of HTML nodes?
No, manual deletion of these files is unnecessary. They are stored in the operating system's temporary directory, which is automatically cleared periodically.
Can I use this extension to edit a writable area, such as a textarea element or input[type=text]?
This extension introduces a new context menu item for editable elements. You can use this option to transfer the content of an editable element to the external editor. Similar to HTML editing, the content is sent back upon saving by the external editor. It's important to note that this extension employs TXT format when modifying the content of an editable element.
Is it possible to use this extension for editing external resources?
If your browser supports DevTools integration, you will find a button in the panel labeled "Convert to Local Resource." This option is available for SCRIPT and LINK[type=text/css] elements. When activated, the extension retrieves the remote content and creates a new same-type element with the remote content. Subsequently, the remote resource is removed. You can select the newly created element from the inspection panel and edit it using 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.