Copy HTML chunks using the Chrome Dev Tool

When you’re working with the DOM, viewing the page source is not going to be very helpful because the HTML has been changed dynamically and that is the beauty of the DOM. When I was using Firefox Chris Pederick had a great tool that let me not only see the source but I could also see the generated source (which was the HTML after it was changed using the DOM). {note: if you want a great book on learning about the DOM, read this}. But I don’t use Firefox anymore and Chrome is now my ‘go to browser’.

Chrome has a built in dev tool (as most modern browsers do) and it is pretty darn useful. You can view the source by right clicking on the page and choosing ‘view page source’. Or you can open up the Chrome dev tool by right clicking anywhere on the page in the browser and choosing ‘inspect element’. This will show you the HTML on the left and the applicable CSS on the right (which is not only very cool it’s also very useful).

But if you want to copy a chunk of code you may find this hard to do. You can only select one line at a time. But if you highlight the parent element and right click, you can choose ‘copy HTML’ and that will copy to the clipboard all the HTML inside that parent element (including the parent element).

This is a small tip but one you may use often.

Leave a Reply

Your email address will not be published. Required fields are marked *