During the Netscape Navigator vs. Microsoft Internet Explorer browser wars, there was uproar when Microsoft included its browser as a standard part of Windows (at one point trying to make it the desktop). Years later, the landscape is much different, as Google’s Chrome browser has steadily gained market share since its introduction — it is now the face of Google Chromebooks. The Chrome Dev Editor (Google also calls it CDE) extends its reach by providing a development environment within the browser.

Going to the store

Getting the Chrome Dev Editor is as simple as opening an instance of the Chrome browser and going to the Chrome Web Store. A search for ‘dev editor’ returned the results shown in Figure A with the Chrome Dev Editor listed first. Once installed, it appears in the list of installed Chrome Applications (navigate to chrome://apps) as shown in Figure B.

The installation of the Chrome Dev Editor is local, so installing it on your Chromebook does not mean it will appear on other computers used with your Google account. However, if you store project files on Google Drive or another cloud resource, you can access the files from any computer and use the Google Dev Editor when/if installed.

Figure A

Locating Chrome Dev Editor in the Google Web Store.

Figure B


The results of installing Chrome Dev Editor on your machine.

Web development

The Google Dev Editor facilitates development of web applications that use web standards (HTML, JavaScript, CSS). Figure C shows the basic interface with two projects loaded. The projects and files appear in the left portion of the screen. There are two projects open in Figure C (TechRepublic and TechRepublic2). The files and directories within a project appear under it as a tree that can be easily navigated — click on a file to open it in the editor (the right portion of the screen). An HTML file (index.html) is open in Figure C. Multiple files opened appear as tabs across the editor portion of the screen (notice main.js is open as well).

Figure C

The Chrome Dev Editor interface with two projects open.

The three vertical dots at the top of the Chrome Dev Editor interface (to the right of the Filter text box) project options for creating new projects as well as others like opening a folder, cloning a Git repository, and deploying to mobile device or Chrome Web Store (Figure D). The window in Figure E appears when you decide to create a new project.

Figure D

Creating new projects and other options available.

Figure E

Creating a new project in Chrome Dev Editor provides plenty of options.

A new project allows you to use a blank project where you can add your own resources or use templates for web apps, Chrome apps, and Polymer elements. Polymer is a vehicle for creating web components that may be reused in other web applications. Chrome apps target the Chrome Web Store. I focus on web apps in this article. When building a web application, you are presented with the following options:

  • Dart Web app: This creates the framework for building an application that uses the Dart platform and language from Google.
  • JavaScript Web app: A basic web application using JavaScript and other web standards.
  • JavaScript Web app (using Polymer paper elements): A basic web application that uses Polymer web components.
  • Web Starter Kit: All of the pieces of the Web Starter Kit are installed in the newly created project. As the site states, it provides a boilerplate and tooling for building multi-device application development.

Figure F shows the results of creating a new JavaScript web app where it includes the standard HTML file (index.html) along with JavaScript and CSS files. Figure G shows the application loaded via the web server provided with the Chrome Dev Editor tool. You are not restricted to the files included in the new project as you can add other files (and directories) as needed. Right-clicking the project and choosing the option shown in Figure H accomplishes this. Also, you will notice in Figure H that I have already added Bootstrap files (a new directory) as well as the Moment.js file. The Deploy to Mobile option shown in Figure H allows you to test on mobile devices (it provides the URL to use), but this is currently only available for Android devices.

Figure F

A new JavaScript web app project created.

Figure G

The JavaScript web app loaded for preview.

Figure H

Adding resources to a project are easy.

One piece of the puzzle

When you add Chrome Dev Editor to the Google App suite, along with countless third-party applications to go with the Chromebook, Google offers something for everybody.

The Chrome Dev Editor is rudimentary, as you will not find bells and whistles common to other full-featured development environments like Web Matrix or even Visual Studio. One feature I like is autocomplete, because there is no way I can remember syntax for every object, property, method, and so forth.

Chrome Dev Editor is currently in developer preview, so more features may be added before its official release as well as in subsequent versions. It may be a nice tool for quick edits, but I can’t see it offering anything above and beyond a text editor. However, if you own a Chromebook, Chrome Dev Editor could become your best friend for web development.