Writing JavaScript code in Chrome using Snippets - Chrome Dev Tools

If you frequently write code onto the browser console, this video will cover how you can write, edit and delete the code snippets within your Chrome browser.


let userSalaries = [
{ user: "harry22", salary: 2000 },
{ user: null, salary: 3300 },
{ user: "bonsaii24", salary: NaN },
{ user: "deeksha25", salary: 3500 },
{ user: "", salary: 4000 },
let filtered = userSalaries.filter((item) => item.salary > 3000);

Full Transcript

00:00 Hi there. Welcome to today's video and I'm Deeksha Shama from bonsaiilabs. If you're one of those developers who frequently write code onto the browser console, this video will cover how you can write, edit, and delete the code snippets within your Chrome browser. Let's say we have this snippet of code that we would like to run and test on Chrome. userSalaries is an array of objects containing the user name and user salary. Now this code filter out and return an array containing objects where salary is greater than 3000. Additionally checks that the user should be valid, which means it should not be null or undefined. As you can see, this code spans across multiple lines and writing it on the console is pretty cumbersome, but you can write these long snippets within your Chrome dev tools and in fact you can save them. Let's look at how can we do that.

00:52 Open your Chrome browser and use command+option+I on Mac or control+option+J on your windows machine and you will be inside the dev tools. Select sources panel from menu. Now I already see snippets over here, but if you don't see it, click on more tabs and you will see in the menu. You can now add a new snippet by clicking on this new snippet button and you'll get a sort of scratch pad or to say code editor where you can write your code. Snippets are nothing but the script that run on any page. We can now paste the entire code to filter array right here. We can run it by clicking on this play button, which runs the snippet and return the result at the bottom of the console. We can rename this snippet. Let's rename it to array filter and we can add multiple snippets inside the snippet pane.

01:53 When you click on them, you'll be able to edit them here itself. Now, no matter if you refresh the page, close the window, or even quit the browser, your snippet remains as-is. Next time you open the browser, you can access the snippet from the sources panel to delete a snippet. You can right click on it and select remove. This will delete the snippet from your browser and that's it. Next time, if you're writing 10 to 20 lines of code in your editor and saving these small code samples for future reference, consider using Chrome snippets instead. I hope this was useful for you. If it was, then be sure to subscribe and until then, keep learning and share your knowledge. I'll see you in the next video.