The pros and cons of Inspect Element vs. Source

Inspect Element

Inspect element is opened by pressing ctrl(cmd on mac) + f. It shows the HTML code for a certain page and allows you to interact with the code. One way you can interact with the code is by hovering over elements in the popup sidebar, which will show you certain attributes such as the name of the element. There is also a button in top left corner of the right hand sidebar which allows you to click on anything in the page. This will take you to the code of that specific element, so that you can connect the code to the website visually. The HTML in the right hand sidebar is also neatly color coded for the human eye, making it easier to interpret. In addition, Inspect element also shows you a lot of the attributes in certain sections that can be found by fiddling with certain parts of the sidebar that show some of the attributes and connected libraries to the page. The main con of Inspect element is that it’s hard to search through with algorithms.

Source

The source code can be accessed by right clicking any webpage, and then clicking the 2nd to last option in the dropdown menu titled “view page source”. It will open a new tab with the page’s source code. The pros to source code is that it’s very easy to use features like control or command+f to search for how many of certain things show up in a page’s source code. It’s also very easy for AI and algorithms to search through a page’s source code and analyze it. It’s also good because you don’t have to do any poking around to find anything because it’s all in one page in front of you. However, it’s very hard to read for humans because they gave up on formatting because they didn’t expect humans to actually read it. It’s better for more advanced programmers who can analyze code even when it’s spaced terribly, but it’s harder for more intermediate coders who need a visual representation to connect to the code.

My thoughts in which is better

In my opinion as an intermediate coder, I prefer inspect element as it’s much more easy for my brain to process the code with the visual link, but there are definitely strong pros to using source rather than inspect element for algorithmic reasons.