# Quickstart
# Chrome extension
Install the Chrome extension by clicking the Add to Chrome button.
Once you've installed the Chrome extension it will become available trough the devtools panel in Chrome.
It will automatically connect with the Devsync editor extension once it becomes available.
Important!
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.
# 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".
# Download links
# 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.