code2chrome README

Code to Chrome (C2C) allows you to communicate VSCode with Google Chrome browser while developing web applications. Currently, its main feature is quite useful, especially when you are new to an existing project, or when you are working on legacy projects and you don't remember much about what they were about.

Features

• Node inspection from chrome -> open source file in vscode

This is its main feature and it allows you to select an element of your web application in development while simply browsing it in google chrome. Just by clicking on one of the elements of your application in chrome, it will be enough for VS Code to tell you where that element is in the source code of your application.

• Save changes in vsc code file -> reload tab in chrome.

When you modify your source code in code, your tab in chrome is automatically updated.

Tip: You must also install the homonymous extension for google chrome, which is also called Chrome to Code (C2C)

How to Use

To use C2C commands, follow these steps:

1. Open Visual Studio Code.
2. Press Ctrl + Shift + P (or Cmd + Shift + P on macOS) to open the command palette.
3. Type C2C in the search bar.
4. Select the command you want to run.

In Chrome

1. Install Chrome to Code
2. Go to the tab where you have the development version of your app.
3. Click on the extension icon and select elements of your app.

The first time you do it

1. In VS code you will be asked to indicate in which folder you have the templates of your app. Choose it.

2. That's it :) Go to Chrome again, and click in Chrome to Code extension to select node elements in your app and find your sources.

Requirements

You need to have Chrome to Code extension installed in your Google Chrome browser.

Extension Settings

• code_to_chrome.port: The default port is 3883, but you can choose whatever you like. Note that if you change it here you must also change it in Chrome, in the Chrome to Code settings.

Known Issues

We are currently aware that the mechanism used may be a bit extreme. We are evaluating other alternatives.

Release Notes

1.0.2

• Add React and Angular components support.
• Bug fix: exclude binary files.

1.0.0

• Select project template file folder.
• Enable data-c2c attribute on text files in directory.
• Disable data-c2c attribute.
• Automatic listening for chrome connections on startup.
• Tells Chrome to reload tab when saving file.
• Remove overlay after changing line.

Enjoy!