Search for a command to run...
Full Stack Developer | Freelancer | JavaScript | React | Nodejs.
Loves sharing knowledge through technical articles.
Dev.to: https://dev.to/myogeshchavan97
https://linktr.ee/myogeshchavan97
Thank you nate sire
In this tutorial, you will build a Task Management App using Next.js 16 and Prisma 7 from scratch. By creating this app, you will learn: How to set up Prisma 7 with the new Rust-free architecture How to configure a database with Prisma's driver ada...
If you're a React/Next.js developer who diligently updated your packages last week after the critical React2Shell vulnerability (CVE-2025-55182), I have some frustrating news: you need to update again. Security researchers, while probing the patches ...
Is your React app dragging its feet, but you can’t pinpoint the cause? You might think you’re following the best practices, but some common development patterns are actually degrading your app’s performance behind the scenes. In this article, we’ll u...
How to Use Separate SSH Keys for Company and Personal GitHub Accounts Managing multiple GitHub accounts is a common challenge for developers who juggle both personal and professional projects. It becomes even more complex when you want to use differe...
Have you ever built a React app only to realize that users from different countries can't use it effectively because it only supports English? In this tutorial, you'll learn how to build truly global React application using internationalization (i18n...
Chrome developer tools are an essential part of web development.
Here are some of the tips and tricks of chrome developer tools to make your life a lot easier during development.
It will take a screenshot of the entire page no matter how long the page is.
You can also take screenshots of any section of the page using this trick. Suppose you are on the homepage of Hashnode website and want to take a screenshot of the left side menu
Suppose you are on google.com and want to see the CSS styles applied for google logo
The snippet is the JavaScript code that you want to execute on any website.
This is to save from manually copy-pasting the code in the console to test on every page. You can run the created snippet on any website, anytime.
To Create a snippet
For example, if you want to get all the scripts included on a webpage, you can use the below code
(function () {
console.log(
Array.from(document.scripts).forEach((script) => console.log(script))
);
})();
Note that, the snippet code that needs to be executed has to be an IIFE(Immediately Invoked Function Expression)
This technique allows the mapping of local JavaScript or CSS files to files on the production site. This is very useful for debugging production issues.
Many times the UAT / Production environment has environment-specific data like database, migration scripts, etc so making the local environment the same as UAT / Production is not possible.
In this case, local overrides come very handy. You can quickly execute any JavaScript or CSS directly on UAT / Production by mapping local files without the need of deploying the changes.
To do that, follow the below steps.
It will persist your changes even across refresh so you can test your changes before pushing to UAT or production site.
Note, you can make changes to JavaScript or CSS files in your preferred editor like VS Code instead if changing in the browser does not feel good. Just copy the changed file in VS Code to the folder created in the first step at the correct directory and refresh the page in the browser.
Check out the below video for the demo
Consider you have the following JSON.
const book = {"date": "2019–03–22","book": "Harry potter","author": "J.K.Rowling"};
To make it more readable in the console, you can use JSON.stringify(book, null, 2)
The 2 passed as the last argument is the number of spaces to use before each line. You can even pass \t to indent it by tab
Suppose you are debugging code in chrome by adding breakpoint and the variable value is a long JSON and you want to copy that value for inspection, you can execute the copy function in the console by passing the variable name and the value will be copied to your clipboard
If you want to copy some JSON data displayed in the console,
copy function to copy that value to the clipboard
Many times while debugging in chrome, you will find yourself using your mouse to hover over the variable name to check its current value.
This is painful every time doing a mouse over to check the value for each variable. Instead of doing this, you can add that variable name in watchlist by clicking the + button beside the watch section in the debugger as shown below
So every time you are stepping through the code, the current values will be updated in the watch section and you don’t have to mouse over the variable name
Using this technique you will be able to quickly find the redundant CSS that is not used anywhere on the site.
This allows us to minimize the CSS file size by removing that unused code.
console.time and console.timeEnd functions allow us to find out the time taken for executing a particular code.
console.time('users');
axios.get('https://randomuser.me/api/?page=1&results=20').then((response) => {
console.timeEnd('users');
});
Once you execute the above code, you will see output that displays the time taken in milliseconds in this case.
If you have an array of JSON objects you can use console.table to get the result in a table format so you can analyze it better
If you have a loop that iterates through items and you want to see the variable values during each iteration, you can use console.groupCollapsed method. It allows us to easily see the output without cluttering the console.
axios.get('https://randomuser.me/api/?page=1&results=5').then((response) => {
const users = response.data;
users.results.forEach((user) => {
const name = user.name;
const location = user.location;
const email = user.email;
console.groupCollapsed('User Details');
console.log(name);
console.log(location);
console.log(email);
console.groupEnd('User Details');
});
});
Once you execute the above code, you will see the output as shown below
If you want to see all the files loaded by a particular site, you can use Ctrl+O or Cmd+O (Mac) to see the list of all files. Here you can check for a particular file or just type .css to see a list of CSS files
To search for a particular text across all the files loaded on the page, use Ctrl+Shift+F or Cmd+Option+F(Mac)
You can find the complete source code for this application in this repository and a live demo of the deployed application here.
Starting with ES6, there are many useful additions to JavaScript like:
You can learn everything about all the ES6+ features in detail in my Mastering Modern JavaScript book.
Check out free preview contents of the book here.
Also, you can check out my free Introduction to React Router course to learn React Router from scratch.
Want to stay up to date with regular content regarding JavaScript, React, Node.js? Follow me on LinkedIn.
