Friday, February 07, 2014

Difference between view source and view element in chrome

Introduction

Right-Clicking on a page in Google Chrome shows up a context menu. This context menu has two options -

  1. View Page Source
  2. Inspect Element

The Difference between the two

I had always assumed that these are same html "code", but they are no. View Page Source gives you the raw page source. Inspect Element gives you the rendered code. That's a key difference! 
Consider the case of an JS script that updates the DOM dynamically. Looking at the page source, we only see the script code or the link to it. Inspect element however shows the updated DOM! So, it's an easy and simple way to understand your updated DOM.