Mastering Chrome Developer tool Tips and tricks

Basic Console Navigation & Shortcuts

Open Console Quickly: Use Ctrl + Shift + J (Windows/Linux) or Cmd + Option + J (Mac) to open the Console directly.
Clear Console Output: Use Ctrl + L or type clear() in the Console to clean up clutter.
Command Palette: Open the Command Menu with Ctrl + Shift + P (or Cmd + Shift + P on Mac).

Debugging with Console

Logging Data: Use console.log() to print variables or messages. For structured output, use console.table():

const users = [{ name: 'Alice', age: 25 }, { name: 'Bob', age: 30 }];
console.table(users);

Inspect Objects: Use console.dir() to explore DOM elements or objects in detail.
Set Breakpoints: Right-click on the line number in the Sources tab to set breakpoints in your code.
Monitor Events: Use monitorEvents(element, 'event') to track events on an element:
```
monitorEvents(document.body, 'click');
                
```
Stop Monitoring Events: Use unmonitorEvents(element).

Using Fetch and Debugging Network Calls

Fetch Example:

fetch('https://jsonplaceholder.typicode.com/posts/1')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

Check Network Logs: View the Network tab to analyze request/response headers, status codes, and payloads.
Retry Fetches: Copy fetch() calls directly from the Network tab by right-clicking a request and choosing "Copy as Fetch."
Breakpoint on XHR or Fetch: In the Sources > Event Listener Breakpoints, check "XHR Breakpoints" to pause execution whenever a request is sent.

Debugging JavaScript

Live Edit Code: In the Sources tab, modify code directly and hit Ctrl + S (or Cmd + S) to save and run updated scripts.

Pause Execution: Use the debugger; statement to pause execution where it's placed:

function myFunction() {
  debugger; // Execution will pause here
  console.log('Debugging...');
}
myFunction();

Conditional Breakpoints: Right-click on a breakpoint in the Sources tab and set a condition (e.g., i === 5).
Stack Traces: Use console.trace() to log the current stack trace.

DOM Debugging

Select DOM Elements: Use $0, $1, etc., to reference elements selected in the Elements tab.
Find Elements: Use $('selector') or $$('selector') for querying single or multiple elements:
```
const buttons = $$('button');
console.log(buttons);
                
```
Modify Elements: Select an element in the Elements tab, then modify it in the Console:
```
$0.style.color = 'red';
                
```

Find Performance Benchmark

Measure Performance: Use console.time() and console.timeEnd() to measure code execution time:

console.time('fetch-time');
fetch('https://jsonplaceholder.typicode.com/posts')
  .then(response => response.json())
  .then(data => console.timeEnd('fetch-time'));

Inspect JavaScript Functions: Type the function name in the Console to view its definition:
```
console.log(myFunction.toString());
                
```
Track Variable Changes: Use watch('variableName') in the Sources tab to monitor changes to specific variables.

Format JavaScript in Console: Use JSON.stringify(object, null, 2) to pretty-print objects:

const data = { name: 'John', age: 25, city: 'New York' };
console.log(JSON.stringify(data, null, 2));

Find Unused Javascript

You can find unused JavaScript on your website by using the coverage tab in the Chrome DevTools. Press Ctrl/Cmd+Shift+p to open a command menu and type coverage to open the coverage tab. Now, click on the reload button within the coverage tab. The coverage tab tracks all the files and prepares a coverage list for you. Inside the list, you can see all the files have a usage visualisation graph. Click on a row to see the unused code in the sources tab.

Local File Override test changes before pushing to it production

Making changes to a production website is not ideal. If you break something, the whole website can go down. Is there a safe option to try out new things without actually changing the production code?
Local file overrides are a convenient feature for making tweaks to your website without changing the actual source code. Using local file overrides, you instruct Chrome to use your local modified files rather than using the files coming from the server.
To enable local file overrides, go to the sources tab of your Chrome DevTools and click on "enable local overrides". Now create a directory and give Chrome permission to save all the overrides in that directory.

Multiple Cursors One code many places

Ever have multiple lines you need to add something to? You can easily add multiple cursors by pressing Cmd + Click (Ctrl + Click) and entering information on multiple lines at the same time.

Capture Screenshots with dev tools

Capture a full-page screenshot.
Screenshot a node from the Elements panel.
Screenshot an area of a page.
Screenshot a node larger than the screen size.
Customize your screenshot.
Screenshot a mobile version of a website, and add a device frame.
Capture Screenshot videa

Make Readable Unminify JavaScript code

Code minifying is a build technique that is used to decrease the size of code files by removing indentations, spaces, and various other unnecessary things. Browsers can easily read and execute a minified file but for developers, reading a minified file is almost impossible.
Using Chrome DevTools, you can easily unminify a JavaScript file. Open the Chrome DevTools and go to the source tab. Then open a minified file from the left file explorer tab. Now click on the {} icon on the bottom of the file editor to unminify a file.

Record screen for automation

As a developer, you want to test how your website will react to different user flows. User flows are the journeys that users take on your website. It can be challenging to test a user flow manually, as you may need to repeat the same action again and again to mimic the user.
To record a user flow, open the Chrome DevTools and switch to the recorder tab. Now click on the red coloured recording button to start a new recording. Give your recording a unique name so that you can recognise it later. Now press the record button and perform the user flow that you want to record. All your actions, such as clicking buttons and navigating to other pages will be recorded. Once you've finished, click the end recording button, and your user flow is ready to replay. Now you can test your website with this flow automatically, without manual repetition.

Sitecore | .Net Core| Azure| C# | Nextjs

Thursday, January 23, 2025