Website Development Prices

Search Blog

Thursday, August 26, 2021

How do I copy all HTML code from Chrome Developer Tools?

How to copy all HTML code from Chrome's Developers Tools.

1. Go to a page you want to inspect. In this example, I'm on localhost.

2. You can access the code in two ways. 

2a. First way, in the Chrome Browser, in upper right corner click on three dots. Hover over "More Tools" and from drop down menu click on "Developer Tools". Or, in the Chrome Browser, on the keyboard press CTRL+SHIFT+I.


2b. Second way, in the Chrome Browser, right-click somewhere on the page and from the drop down menu click on Inspect.


3. Find three dots on the "Top Bar". It is on the right side, next to cog icon (in the middle of the image below).


4. Click on "Three Dots" and from drop down menu choose the position of the Dock. 


4a. First icon - undock into separate window.


4b. Second icon - dock to the left.


4c. Third icon - dock to the bottom. 


4c. Fourth icon - dock to the right. 


5. If not, click on Elements tab, on the "Top Bar".


6. Click on the HTML tag (the highest element on the page) to select it.

Right-click on it and from the drop down menu hover over Copy and click on "Copy outerHTML".

7. Open code editor of your choice, in this example, Sublime Text 3. Press CTRL+N to create new document. Press CTRL+V to paste the HTML code you copied in the step 6. 


Press CTRL+S to save it. Name it and save it.

No comments:

Post a Comment

Note: Only a member of this blog may post a comment.