How to Edit HTML in Chrome

Editing HTML directly in Chrome’s Developer Tools is a quick and easy way to make small changes or preview updates before changing the actual code.

Whether you’re checking how elements look, fixing bugs, or temporarily changing a webpage’s content, the process is straightforward.

Steps to Edit HTML in Chrome

Step 1: Open Chrome Developer Tools using one of the following methods

• Right-click any element of the webpage and select Inspect.
• Use Keyboard Shortcut:
  • Press Ctrl + Shift + I on Windows/Linux.
  • Press Command + Option + I on macOS.
• Click the three-dot menu in the top-right corner, navigate to More Tools, and then select Developer Tools.

Step 2: Select the Element to Edit

• Once Developer Tools is open, you will see a panel that shows the page’s HTML structure.
• Click on the Elements tab at the top of the panel if it’s not already selected.
• Hover over different lines of code, and Chrome will highlight the corresponding sections on the webpage.

Step 3: Modify the HTML

• Right-click the specific element (HTML tag) you want to edit and choose Edit as HTML.
  You can now directly edit the HTML that appears inside the text editor.
• Make your changes, such as altering the text, adjusting the attributes, or adding new elements.

Talk to an Expert

Step 4: Preview the Changes

• Once you’ve edited the HTML, the changes will be reflected on the webpage in real time.
• Remember that these modifications are temporary and will reset once the page is reloaded.

Step 5: Save or Export Changes (Optional)

• If you want to keep these changes permanently, you must copy the updated HTML and paste it into your source code using a text editor or web development platform.

If you are a tester or a developer, and you want to edit or debug your HTML code in different conditions and browsers (like Chrome, Safari, Firefox, and Microsoft Edge), BrowserStack Live offers a real device cloud platform.

BrowserStack provides access to over 3500+ different devices, browsers, and OS combinations where you can test your website functionalities, debug HTML code, detect bugs, get detailed bug/error reports, and more.

Try BrowserStack Live