Section 1.1: Conditional Breakpoints

Have you ever needed to ensure that a certain variable, like the name of a food item, is equal to 🍫 when a breakpoint is reached? In scenarios involving large datasets, conditional breakpoints can be invaluable, greatly enhancing your workflow.

Section 1.2: Installing NPM Packages via Console

When you need to use libraries such as dayjs or lodash but want to avoid browsing their documentation, you can easily install these packages directly from the console. By utilizing the Console Importer plugin, simply enter $i('package-name') to install an npm package on the fly.

Section 1.3: Resending XHR Requests

Collaboration with back-end developers often requires debugging API requests. To efficiently resend a specific XHR request, follow these steps:

1. Open the Network panel.
2. Click on Fetch/XHR.
3. Select the desired request.
4. Right-click and choose "Replay XHR."

Section 1.4: Switching Theme Colors Instantly

Whether you prefer a light or dark interface, Chrome allows you to toggle between themes effortlessly. Use the shortcut cmd + shift + p, then type "Switch to dark theme" or "Switch to light theme" to change your view.

Section 1.5: Modifying and Resending Requests

If you need to adjust parameters for a specific request, here's a quick method:

1. Open the Network panel and select Fetch/XHR.
2. Choose your request and click "Copy as fetch."
3. Modify the parameters as needed and resend.

Section 1.6: Accessing Selected DOM Elements

When you select an element in the "Elements" panel, you can easily print its attributes—like width, height, and position—using $0 in the console.

Section 1.7: Capturing Full-Size Screenshots

To take a screenshot of a page longer than one screen, simply prepare the desired content, then execute cmd + shift + p, type "Capture full size screenshot," and hit enter. For targeted screenshots, use "Capture node screenshot" for specific areas.

Section 1.8: Expanding Child Nodes Efficiently

To expand all child nodes of a DOM element at once, hold down "Alt" and click in the "Elements" panel, saving you the hassle of expanding each node individually.

Section 1.9: Using $ to Retrieve Last Execution Results

When working with strings and wanting to see results from various operations, you can use $ to quickly access the outcome of the last executed command without needing to copy it every time.

Section 1.10: Quick DOM Element Selection

Instead of using the longer document.querySelector and document.querySelectorAll methods, you can streamline your code using $ for single elements and $$ for multiple selections.