homeAppSaved.com WINDOWSWINDOWS WEBWEB MACMAC IOSIOS ANDROIDANDROID LINUXLINUX

Chrome Dev Editor

source code editor

thumb of Chrome Dev Editor
  • Publishers:
    Google
  • License: Free
  • Capacity: 22,4 MB
  • Saved: 121
  • Update:
  • System: Windows XP/Vista/7/8

Chrome Dev Editor (formerly known as Spark) is a Chrome-based application development and development tool such as using the Dart or JavaScript language - including Chrome and web apps.

Picture 1 of Chrome Dev Editor
Chrome Dev Editor editor interface

While there are many browsers to choose from, Google Chrome is still a popular browser because of its safety, speed, and especially the rich and diverse extensions that Google brings to people. use.

Not only do ordinary users have access to Chrome's rich array of utilities, from games to graphical tools, etc. Chrome now offers a tool for developers. and application development. As a source code editing tool , besides writing application with JavaScript or Dart, Chrome Dev Editor also supports Polymer templates to help users start building UI UI. The utility also integrates with support for Git, Pub and Bower.

Key features of the Chrome Dev Editor

  • Build Chrome apps and web apps.
  • Use JavaScript and Dart languages.
  • Support of Polymer models.
  • Support for Git, Pub and Bower.
  • Ability to preview with Markdown markup languages.

Editor

The Chrome Dev Editor source code editor provides users with a variety of templates, including web applications built on the Dart or JavaScript language and Chrome applications. Powered by the Ace editor, the Chrome Dev Editor allows users to experience the features of an editor with the ability to highlight syntax in their preferred language, code folding (ability to hide or display a text when writing code), auto-indentation, and more.

Picture 2 of Chrome Dev Editor
Syntax error message in the editor

Dart support

This is the most outstanding feature of Chrome Dev Editor because not only editing with Dart, this tool can also compile (compile) Dart even on Chrome. Syntax errors are shown on the right side of the editor, making it easy to debug and a sidebar will quickly navigate to the Dart file. When you open a project working with Dart in the browser, reloading the page will make the recompilation process take place immediately.

Picture 3 of Chrome Dev Editor
Run Dart in the Chrome Dev Editor

Admittedly, compiling a Dart file is slow (on early ARM Samsung Chromebooks), but the ability to write and run Dart code on Chrome is a great feature. With C ore i3, i5 or i7, slow compilation will no longer occur.

Git support

Chrome Dev Editor also has support for Git, which is essential for Chrome users who want the code to be more manageable. Git is a distributed version management system that helps computers store different versions of a clone from a source repository. Changes in the source code will be committed and posted on the server.

Picture 4 of Chrome Dev Editor
The Git support feature of Chrome Dev Editor

Clones, swapping, committing and pushing are all supported. The changed files will be highlighted in blue on the tab to help users easily see the changes.

Ability to preview

The Chrome Dev Editor also supports the ability to preview Markdown with the installation or update of the Bower package, deploy directly to Android devices and export to the Chrome Web Store when a developer creates a Chrome application.

Picture 5 of Chrome Dev Editor
Deploy to Android device

Instructions for creating applications with Chrome Dev Editor

Step 1:

After choosing to add the Chrome Dev Editor source editor to Chrome, open up Chrome and select the Show Apps icon . Alternatively, on the desktop, select Select Chrome App Launcher from the taskbar. In addition, manually typing the command Chrome chrome: // apps / will also take you to the applications already installed on Chrome.

Picture 6 of Chrome Dev Editor
Find apps in the Chrome app store

Step 2:

The next step is to select Chrome Dev Editor on the application list and a new window will appear.

Picture 7 of Chrome Dev Editor
Main Menu Bar of Chrome Dev Editor

Choose to create a new project by clicking New Project in the main menu list in the left corner. A quicker way is for the user to click the red plus icon located in the lower left corner of the interface.

Picture 8 of Chrome Dev Editor
Choose to create a new project with Chrome Dev Editor

Then enter a name for this new project as well as select one of the available project types and click Create .

Picture 9 of Chrome Dev Editor
Name and type of application that will be created with Chrome Dev Editor

Step 3:

Create an index.html file and add the following mark-up to that file.




MangoTreee Project




Step 4:

Create a JavaScript file to run the newly created index file.

var data = document.querySelector ("# app_style");
data.innerText = "Hello, bigknol";

Step 5:

Create styles for the sample application

#app_style
{
background-image: url ("bg.png");
background-repeat: no-repeat;
font-family: 'Open Sans', sans-serif;
font-size: 30px;
margin-bottom: 30px;
margin: 20px;
}

Step 6:

The final step is to run the test by clicking the Run button in the Chrome Dev Editor.

Not only is a web development tool that helps create applications on the Chrome platform, Chrome Dev Editor also brings cross-platform applications based on Dart, JavaScript and Polymer elements. Now, start creating an app that you've always been cherished with a very handy and useful source code editor called Chrome Dev Editor.

Pactimza