Getting started with Chrome Dev Editor

Transferred from: https://github.com/GoogleChrome/chromedeveditor/blob/master/doc/GettingStarted.md

Installation

• Install Chrome Dev Editor on Chrome
• Open Chrome Dev Editor from the chrome App Launcher or Chrome://apps

Git Workflow

• Click on the Menu icon and select  Git Clone ...
• provide the  Repository URL   (EG: HTTPS://GITHUB.COM/SRSAROOP/TODOMVC)
• click  CLONE
• the project would cloned into the Files view on the left
• Right-click the project on the Files view and your can see more Git options
  • Create Branch ...
  • Switch Branch ...
  • Commit changes ...
  • Push to Origin ...
• When do change to files in the project, blue markers'll appear on the files view to indicate files That is modified.
• to commit and push changes:
  • Right-click the project and select  Commit changes ...
  • Enter Your name, email and commit message and click  commit
  • Right-click the Project and select  Push to Origin ...

Chrome App workflow (including Mobile)

• Create a new project from the JavaScript Chrome App template or clone from an existing Git repository (EG:HTTPS://GITHUB.C OM/SRSAROOP/TODOMVC)
• Click the run icon to run the Chrome App
• Chrome App for Mobile workflow:chrome apps can now run on Android devices using a toolchain based on Apache Cordova.
  • On your Android device:
    • Enable off-store installs:  Settings > Security > Device Administration > Unknown Sources & Gt Allow installation to apps from sources other than the Play Store
    • Enable developer Options:  settings > About phone > Build number > Tap 7 times  enable USB debugging: Settings > De Veloper Options > Debugging > USB Debugging
    • Install the latest Chrome App Developer tool for Mobi Le (App Dev Tool) on your Android device
      • on your Android device, Open https://bit.ly/cradt
      • On your Android device, click on the green button to download the latest version of Chromeappdevelopertool-debug.ap K
      • Click OK on the popup dialog to download the APK
      • Once The download was complete, Click O n the notification for the download
      • Click Install and open the  App Dev Tool
  • Connect your Android device to your computer with a USB cable
  • Click deploy to Mobile ... and deploy via USB
  • Click OK on the authorization dialog on your Android device
  • Your Chrome app should launch on the app Dev Tool
  • Double Two-finger tap to go back to the main App Dev Tool Menu
  • Use Chrome://inspect to remote debug your chrome APP
    • Once you open the Devtools inspector (with Discover USB Devices checked), it'll claim the phone's USB interface and would not release it. CDE is not being able to re-deploy the application. This is a issue we ' re looking into. As a work-around for now, uncheck Discover USB Devices in DevTools and close the Chrome://inspect page. This would force Devtools to give up the USB interface and CDE'll be able to deploy to the phone again.
• To publish your chrome apps to the Chrome Web Store, click on the Menu icon and select Publish to Chrome web store...

Dart Workflow

• Create a new project from the Dart Web App template or clone from an existing Git repository
• Pub Workflow. The CDE have built-in support for Pub, Dart's package manager. We automatically run Pub when your project is first created or imported. After that, pub was only run when the user explicitly invokes pub get or pub update . This can is done via the context menu on the Dart project or the pubspec.yaml file.
• DartAnalysis. Dart analysis runs automatically as you edit your code! Syntax and semantic errors is called out in the editing area and in the files view. In addition, the CDE can optional display an outline of your Dart file ' s contents. This helps to quickly understand the contents of a file and navigate within it.
• Running a Web App . To run your web app, just hits the Run button on the toolbar or right click on a file in the Files view and select ' Run '. This would open a new tab in the System browser with the contents of your Web app, served up from the CDE. You can keep this tab open and refresh it as your make changes in the CDE and see those reflected in your application.
• Running on Dartium vs Chrome. When serving a dart app up to regular Chrome, the CDE's built in Web server would compile your Dart files to JavaScript on The fly. This is great the for seeing your application run and allows the use of any browser to develop. For larger applications However, it can leads to delays as the CDE compiles new versions on your application. An alternative workflow are to run your application on Dartium, a special version of Chromium with the Dart VM included. No compilation would be required to view your app; Your development cycle would be much shorter (and your app would run faster too!). You can download dartium from http://www.dartlang.org/tools/download.html. In order to use it to develop, simply hits ' Run ' and copy the URL for your application from Chrome to Dartium.

Polymer Workflow

• Creating A new custom JavaScript polymer element
  • Create A new project from the JavaScript polymer custom t Emplate
  • CDE automatically does the following:
    • installs polymer and its dependencies via Bower. You should is able to see the installed folders in bower_components.
    • creates HTML and CSS for the custom HTML element named  <name>-polymer
    • creates  demo.html , which uses the  <name>-polymer element
    • creates a top-level  index.html , which wraps around  demo.html
  • Click The Run icon to run the app.
• Using an existing core polymer element
  • Create a new project from the JavaScript Web App using polymer
  • CDE automatically does the following:
    • Installs polymer and its dependencies using Bower. You should is able to see the installed folders in bower_components.
    • Installs core polymer elements in bower_components .
    • index.htmlThat uses a sample element:core-header-panel
  • Click the run icon to run the app.

Getting started with Chrome Dev Editor