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.
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.
Featured Article
