feat: add Chrome Dev Tools content to the JavaScript roadmap (#2061)

* feat: add basic readme for dev tools

* feat: debugging performance with lighthouse

* feat: debugging issues

* feat: memory leaks in js

content/roadmaps/106-javascript/content/117-javascript-chrome-dev-tools/100-debugging-issues.md

@@ -1 +1,7 @@
 # Debugging issues
+
+When you're just starting out with JavaScript development, you might use a lot of `console.log()` statement in your code to log and check values of variables while debugging. The results of these would show up in the **Console** panel, along with a reference to the line and file of code which originated it.
+
+However, for quicker, more complex and easier to handler debugging (which also doesn't litter your codebase with `console.log()`s), breakpoints and the sources panel is your friend.
+
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://developer.chrome.com/docs/devtools/javascript/'>Debugging JavaScript in the sources panel</BadgeLink>

content/roadmaps/106-javascript/content/117-javascript-chrome-dev-tools/101-debugging-memory-leaks.md

@@ -1 +1,7 @@
 # Debugging memory leaks
+
+A memory leak happens when a process or the programmer creates a reference to a memory in the heap, but then does not delete it once it is no longer needed. This results in less memory being available to the application, reducing performance.
+
+Unlike languages like C, in which the developer has to take full responsibility of memory management using functions such as `malloc()`, JavaScript has inbuilt garbage collection which does a lot of work for you. However, it is not perfect. Give a read to the article below for a rundown of common causes of unresolved memory leaks and how to solve them using dev tools.
+
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://medium.com/coding-blocks/catching-memory-leaks-with-chrome-devtools-57b03acb6bb9'>Catching memory leaks with Chrome DevTools</BadgeLink>

content/roadmaps/106-javascript/content/117-javascript-chrome-dev-tools/102-debugging-performance.md

@@ -1 +1,3 @@
 # Debugging performance
+
+Enter the dev tools and check out the Lighthouse tab. This is essentially a series of tests which analyses the currently open website on a bunch of metrics related to performance, page speed, accessibility, etc. Feel free to run the tests by clicking the **Analyse Page Load** button (you might want to do this in an incognito tab to avoid errors arising from extensions you're using). Once you have the results, take your time and read through them (and do click through to the reference pages mentioned alongside each test result to know more about it!)

content/roadmaps/106-javascript/content/117-javascript-chrome-dev-tools/readme.md

@@ -1 +1,10 @@
 # Javascript chrome dev tools
+
+These are a set of tools built into the browser to aid frontend developers diagnose and solve various issues in their applications — such as JavaScript and logical bugs, CSS styling issues or even just making quick temprary alterations to the DOM.
+
+To enter the dev tools, right click and click **Inspect** (or press `ctrl+shift+c`/`cmd+opt+c`) to enter the Elements panel. Here you can debug CSS and HTML issues. If you want to see logged messages or interact with javascript, enter the **Console** tab from the tabs above (or press `ctrl+shift+j`/`cmd+opt+j` to enter it directly). Another very useful feature in the Chrome dev tools is the Lighthouse (for checking perfomance) — more on this later.
+
+NOTE: This isn't a chrome-specific feature, and most browsers (Chromium based or otherwise) will have their own, largely-similar set of devtools.
+
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://developer.chrome.com/docs/devtools/overview/'>Official Docs</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.freecodecamp.org/news/mastering-chrome-developer-tools-next-level-front-end-development-techniques-3ac0b6fe8a3/'>Mastering Chrome Dev Tools</BadgeLink>