# Quickstart

# Chrome extension

Install the Chrome extension by clicking the Add to Chrome button.

Add to chrome

Once you've installed the Chrome extension it will become available trough the devtools panel in Chrome.

Location extension

It will automatically connect with the Devsync editor extension once it becomes available.


Once you activate the extension Chrome will show you a "message" that "'Devsync Browser Extension' is debugging this browser". This looks like a status message that can be dismissed by clicking the X in the right corner but cannot due to (reasonable) security concerns. Dismissing this "message" shuts down the connection between the debugger and Devsync.

Devsync is debugging message

# Editor extension

Install the editor extension by searching for "Devsync" in your editor's marketplace and installing it.

You can start the extension either by running the Devsync: Start command in your editor or by placing a .devsync file in your project root which will make it auto-start on launch.

When you start the extension your editor should notify you with the notification: "Devsync started". When the Chrome extension connects you should see a notification with the text: "Browser connected to extension".

# Using Devsync

Devsync works similar to most popular visual editors.

# Selecting the element to modify

Devsync injects a simple overlay into the page you're editing to help select the correct element, on clicking the element Devsync will fetch the CSS of the element and you'll be able to edit it in the devtools panel.

# Selecting the CSS to edit

This is only necessary when adding CSS properties, when editing existing ones Devsync will just pick the most relevant rule, indicated by the color assigned to the border of the respective input. The border colors of the active inputs correspond to these selectors.

# Editing CSS property values

You can just edit the values like you would do in a normal editor, some inputs can be dragged with the mouse to change the input value, numeric inputs can be incremented and decremented with the up and down arrow keys (hold shift to 10x the steps).

# Adding CSS property values

Selecting an input and filling in a value will automatically add a new CSS rule with this value to the active selector (see: Selecting the CSS to edit).

# Deleting CSS properties

Clicking on an input holding the CNTRL/CMD will remove the CSS property.

# Selecting elements

The select overlay should automatically be activated when the chrome extension is opened from the devtools panel. Once the overlay is visible there are multiple shortcuts available:

  • SHIFT + Q: Toggles the visibility of the overlay.
  • SHIFT + W: Go up one element in the DOM tree.
  • SHIFT + S: Go down one element in the DOM tree.
  • SHIFT + A: Select the previous sibling of the element you're hovering.
  • SHIFT + D: Select the next sibling of the element you're hovering.