It’s anything but easy to understand how a website has been built. Not only is the code minified and concatenated but it is dynamically loaded based on the device that you are using.
Moreover, there is almost a thousand lines of code built it that is difficult to analyze given that some of it has been written by a developer and other parts generated automatically.
Which begs the question: Can you dissect a website and reverse-engineer it in the process?
Yes, and having said that, here are 3 ways to dissect a website:
#1: Understand the Structure
Instead of jumping right into the code, it is advisable to look at the general structure of a website. Using a Chrome extension such as Instant Wireframe can be very helpful especially if you want to understand the responsive design used when you resize your browser. Of course, you can do even more with Device Mode where if you open DevTools and select the small icon titled Toggle Device Mode icon, you can look at where the various breakpoints exist.
#2: Unwrap the Code
While you might have discovered a lot in the first step, the second one involves looking at the code. With code usually being minified or compressed, it’s best to use a couple of tools such as Unminify to unminify the code. That said, a number of sites usually minify their sources into one file and even when you unminify it, it will still exist as a single file. You can either separate the code manually to understand what is happening or you can use the tool explained next.
#3: Finding the Stack
One easy way to find out which technologies was used to build the site is by using Wappalyzer. Apart from this, check the Sources tab in Chrome DevTools for further information, if necessary. In some cases, there might be unused code and in order to ensure that you prevent this, try using tools such as Chrome Extension Chrome Remove and Combine and UnCSS with this.