Linkinlog / chrome-debugger-exercise

This repository contains challenges designed to test and improve your proficiency with Google Chrome's Developer Tools. The challenges are focused on diagnosing and fixing issues within JavaScript code, making use of the Developer Tools console, sources, network, and other panels.

Chrome Developer Tools Challenges

This repository contains challenges designed to test and improve your proficiency with Google Chrome's Developer Tools. The challenges are focused on diagnosing and fixing issues within JavaScript code, making use of the Developer Tools console, sources, network, and other panels.

Each challenge represents a unique situation that you might encounter when debugging JavaScript code.

Prerequisites

• A modern web browser (preferably Google Chrome)
• Basic understanding of JavaScript
• Familiarity or interest in Google Chrome's Developer Tools

Usage

1. Head on over to the GitHub pages area.
2. Open the Developer Tools panel (You can use Ctrl + Shift + J on Windows/Linux or Cmd + Option + J on macOS).
3. Solve each exercise, utilizing the Developer Tools to assist you.

Exercises

Exercise 1

You'll find a console.log statement in the app.js file. Your job is to find this log without checking the source code directly.

Exercise 2

Upon clicking the "Exercise 2" button, a loop is triggered that displays an alert every 500ms. You have to stop this loop, but be careful not to close your console as it will be harder to reopen it due to the continuous alerts.

Exercise 3

This exercise is about a function that doesn't work as expected. You need to figure out why it's broken and how to fix it. Remember, the function must be invoked only by refreshing the page, not manually.

Exercise 4

In this exercise, an asynchronous function is fetching data and logging a property of the returned data. However, something goes wrong. Use the Developer Tools to find out what's happening and propose a fix. This exercise can be triggered via the button on the page.

Exercise 5

This challenge is about another asynchronous function that doesn't work correctly. You need to find out where you can see the response of the fetch request and identify the error. This exercise can be triggered via the button on the page.

Solutions

Solutions are not provided as this is a set of challenges intended for practice. However, you are welcome to submit pull requests with improvements to the repository or suggestions for new challenges or adding solutions!

Contributing

Contributions are welcome! Please read the contribution guidelines first.

License

This project is licensed under the GNU GPL3 License - see the LICENSE file for details.