Latest tips / 15

Sometimes the TypeScript server in Visual Studio Code crashes which results in broken auto completion. You can restart the server with a single command.

Make sure that you have a TypeScript file open, press Ctrl+Shift+P (or Cmd+Shift+P on macOS) to open the Command Palette and type restart, then select the command "TypeScript: Restart TS server".

The status bar at the bottom of the window will show the status of the server.

The DevTools provide a global copy() function. Use that function in the Console tab to copy any content into your clipboard.

// Copy some static text into the clipboard
copy("hello world");

// Copy the page title
copy(document.title);

// Copy some content from localStorage
copy(localStorage.getItem("test"));

Use $$(...) in the Console tab of the DevTools to query elements. It's a quick way for using querySelectorAll.

// Find all "a" elements
$$("a");

// Find all div elements with "container" in the class attribute
$$("div[class*='container']");

When you select an element in the Elements tab of the Browser DevTools you can use $0 in the Console tab to refer to that element.

// Logs the selected element of the Elements tab
$0;

// Access any property or method on that element
$0.href;

In CSS the special variable currentColor gives you access to the current text color of the element. You can use this value in other properties like border-color to automatically adjust the border to match the text color.

.button {
  border: 1px solid currentColor; /* border color is blue */
  color: blue;
}

.button:hover {
  /* border color automatically changes to darkblue */
  color: darkblue;
}