Next time you are copying and pasting text or small images between programs or browser tabs, instead of pasting the content with Control + V, try using WINDOWS KEY + V.

Introduced in a 2018 Update to Windows 10, this feature allows you to store multiple items on the clipboard, as well as the ability to see what you have copied. Unfortunately, this enhanced clipboard only seems to work with text and small images, so will be of no assistance when copying large files.

However, the ability to store multiple long file paths along with code snippets is quite useful. I can remember several instances of where I have been programming and copying code from one file to another and at the same time needed to copy files with long paths. Putting everything on the clipboard frees up a lot of mental energy as you now have all the data you need in one place, and no longer need to performn the copy and pasting steps in a specific order.

Today, we have a couple tips for more effective JavaScript debugging

Use the Console to check for Warnings and Errors

Sometimes the best way to debug a web application is to use the JavaScript console. I have often used the right click context menu -> select element to open the chrome developer tools to access the console, but there are some potentially easier ways to access this.

Important short cuts to memorize

F12 – Quickly open and close the chrome developer tools

Control + Shift + J – Opens the developer tools, and also opens the console window, saving a click if the console was not open previously. This may be easier than reaching for the F12 key

Here is what the console looks like on reddit.com

You have access to all of the code running on the page through the console, so you can inspect the values of objects or run functions by typing them into the console.

Use Codepen.io for quick experimentation

https://codepen.io is a tool that allows you to write code in the browser and see the results as you go. Code written can easily be shared with others or even embedded into another site making this tool useful for creating proofs of concept.

Sometimes when I don’t remember how a javascript function works, or debugging a small piece of functionality, it is helpful to isolate the code you are working with so that other code does not interfere with your understanding. The Codepen.io interface allows you to define your html, css, and javascript all in one window. I find this much easier than creating files one by one in a text editor or creating an entire project in an IDE like visual studio to test something small .

Use console.table(object) to visualize javascript objects

Type console.table(object) and any object name to get the object to display in a tabular format with properties of the object as rows and indices if it as array or properties of those properties as columns. I find this most useful when the object contains arrays. For example, if you have an object that looks like this called stringData, it might be easier to visualize if it is formatted as a table.

So we can type console.table(window.stringData) into the console, and the object now appears for us like this. Pretty Neat. You can ever sort the columns ascending and descending, as well adjust the width of the columns