diff --git a/content/roadmaps/106-javascript/content/117-javascript-chrome-dev-tools/100-debugging-issues.md b/content/roadmaps/106-javascript/content/117-javascript-chrome-dev-tools/100-debugging-issues.md index 48903ffb3..26fb13cd2 100644 --- a/content/roadmaps/106-javascript/content/117-javascript-chrome-dev-tools/100-debugging-issues.md +++ b/content/roadmaps/106-javascript/content/117-javascript-chrome-dev-tools/100-debugging-issues.md @@ -1 +1,7 @@ -# Debugging issues \ No newline at end of file +# 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. + +Debugging JavaScript in the sources panel diff --git a/content/roadmaps/106-javascript/content/117-javascript-chrome-dev-tools/101-debugging-memory-leaks.md b/content/roadmaps/106-javascript/content/117-javascript-chrome-dev-tools/101-debugging-memory-leaks.md index 088f3c63c..3276b09f8 100644 --- a/content/roadmaps/106-javascript/content/117-javascript-chrome-dev-tools/101-debugging-memory-leaks.md +++ b/content/roadmaps/106-javascript/content/117-javascript-chrome-dev-tools/101-debugging-memory-leaks.md @@ -1 +1,7 @@ -# Debugging memory leaks \ No newline at end of file +# 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. + +Catching memory leaks with Chrome DevTools diff --git a/content/roadmaps/106-javascript/content/117-javascript-chrome-dev-tools/102-debugging-performance.md b/content/roadmaps/106-javascript/content/117-javascript-chrome-dev-tools/102-debugging-performance.md index d3a84a529..8046ee078 100644 --- a/content/roadmaps/106-javascript/content/117-javascript-chrome-dev-tools/102-debugging-performance.md +++ b/content/roadmaps/106-javascript/content/117-javascript-chrome-dev-tools/102-debugging-performance.md @@ -1 +1,3 @@ -# Debugging performance \ No newline at end of file +# 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!) diff --git a/content/roadmaps/106-javascript/content/117-javascript-chrome-dev-tools/readme.md b/content/roadmaps/106-javascript/content/117-javascript-chrome-dev-tools/readme.md index b15bcfa57..3e2696726 100644 --- a/content/roadmaps/106-javascript/content/117-javascript-chrome-dev-tools/readme.md +++ b/content/roadmaps/106-javascript/content/117-javascript-chrome-dev-tools/readme.md @@ -1 +1,10 @@ -# Javascript chrome dev tools \ No newline at end of file +# 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. + +Official Docs +Mastering Chrome Dev Tools