Getting started with Chrome Dev Editor
转自: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 will cloned into the Files view on the left
- Right-click the project on the Files view and you can see more Git options
- Create branch…
- Switch branch…
- Commit changes…
- Push to origin…
- When you make change to files in the project, blue markers will appear on the Files view to indicate files that are 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.com/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 > allow installation of apps from sources other than the Play Store
- Enable developer options: Settings > About phone > Build number > Tap 7 times Enable USB debugging:Settings > Developer options > DEBUGGING > USB debugging
- Install the latest Chrome App Developer tool for Mobile (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 ofChromeAppDeveloperTool-debug.apk
- Click OK on the popup dialog to download the APK
- Once the download is complete, click on 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 will claim the phone's USB interface and will not release it. CDE will not be able to re-deploy the application. This is an issue we're looking into. As a work-around for now, uncheck Discover USB Devices in DevTools and close the chrome://inspect page. This will force Devtools to give up the USB interface and CDE will be able to deploy to the phone again.
- On your Android device:
- To publish your Chrome App 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 has built-in support for Pub, Dart’s package manager. We automatically run Pub when your project is first created or imported. After that, pub is only run when the user explicitly invokes
pub get
orpub update
. This can be done via the context menu on the Dart project or thepubspec.yaml
file. - Dart analysis. Dart analysis runs automatically as you edit your code! Syntax and semantic errors are 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 hit the Run button on the toolbar or right click on a file in the files view and select ‘Run’. This will 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 you 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 will compile your Dart files to JavaScript on the fly. This is great for seeing your application run and allows you to use any browser to develop. For larger applications however, it can lead to delays as the CDE compiles new versions on your application. An alternative workflow is to run your application in Dartium, a special version of Chromium with the Dart VM included. No compilation will be required to view your app; your development cycle will be much shorter (and your app will run faster too!). You can download Dartium from http://www.dartlang.org/tools/download.html. In order to use it to develop, simply hit ‘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 template
- CDE automatically does the following:
- Installs Polymer and its dependencies via Bower. You should be 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 arounddemo.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 be able to see the installed folders in bower_components.
- Installs core Polymer elements in
bower_components
. index.html
that uses a sample element:core-header-panel
- Click the Run icon to run the app.
Getting started with Chrome Dev Editor的更多相关文章
- Chrome Dev Editor:一个新的JavaScript和Dart IDE
在Google IO 2014期间,一位Google工程师带来了Chrome Dev Editor(CDE).该IDE用于创建面向桌面和移动设备的Chrome应用程序和Web应用程序.CDE支持Jav ...
- Chrome Dev Tools :成为更高效的开发人员
原文出处 http://blog.jobbole.com/22065/ 实时CSS Style编辑 选择一个Dom,可以对Dom进行编辑和操作,实时修改Css Style, 同时CssStyle可以保 ...
- chrome dev tools
chrome dev tools介绍一下Chrome dev tools 的基本使用和一些意想不到的小技巧.\\Chrome Developer Tools 是Chrome内嵌的一系列编辑和调试的工具 ...
- [Debug] Debug Node.js Application by using Chrome Dev tools
For example you have a server.js file, and you want to debug some problems; What you can do is: node ...
- [Tools] Create your own mobile emulator device by using Chrome dev tool
Using the New Device Emulation Interface The Device Emulation interface changed a bit with the newer ...
- [Debug] How to Debug a NestJs Backend using the Chrome Dev Tools
TO debug NestJS code with Chrome dev tool, we can run: node --inspect-brk dist/rest-api/src/main.js ...
- 前端性能优化之利用 Chrome Dev Tools 进行页面性能分析
背景 我们经常使用 Chrome Dev Tools 来开发调试,但是很少知道怎么利用它来分析页面性能,这篇文章,我将详细说明怎样利用 Chrome Dev Tools 进行页面性能分析及性能报告数据 ...
- 15个你不得不知道的Chrome dev tools的小技巧
转载自:https://www.imooc.com/article/2559 谷歌浏览器如今是Web开发者们所使用的最流行的网页浏览器.伴随每六个星期一次的发布周期和不断扩大的强大的开发功能,Chro ...
- chrome dev debug network 的timeline说明
在使用chrome的时候F12的开发者工具中有个network,其中对每个请求有个timeline的说明,当鼠标放上去会有下面的显示: 这里面的几个指标在说明在chrome使用文档有说明: 下面我用人 ...
随机推荐
- 函数的扩展--ES6
箭头函数 由于大括号被解释为代码块,所以如果箭头函数直接返回一个对象,必须在对象外面加上括号. var f = () => ({a:1}); f(); // 返回 {a: 1} 若写成: var ...
- Android apk去广告
韩梦飞沙 yue31313 韩亚飞 han_meng_fei_sha 313134555@qq.com 下载地址: [北方网通] [电信网通] [下载说明] 1 点击上面的地址,打开下载页面 ...
- 【树形dp】TELE
[POJ1155]TELE Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 5376 Accepted: 2973 Des ...
- PHP与mysql数据库
1.PHP访问数据库的一般步骤 连接MySQL服务器 选择MySQL数据库 执行SQL语句(增,删,改,查) 关闭结果集,释放资源 关闭MySQL服务器的连接 需要查的表的数据: 2.连接和关闭实例 ...
- 网站服务管理系统wdcp系列教程之九
在我们安装了网站服务管理系统wdcp之后,在使用过程中可能会出现这样或那样的疑问,下面给大家整理几点出来,方便大家学习.还有不懂得话,可以去wdlinux论坛找找相关教程. 1.wdcp如何拒绝或阻止 ...
- iOS开发利器-CocoaPods安装和使用教程
新博客http://www.liuchendi.com 开发iOS项目时肯定会用到许多第三方项目,比如说:ASIHttprequest,JSONKit等等,一些类库可能又关联着其他类库,如果超过一定的 ...
- http请求及缓存框架 GalHttprequest
GalHttprequest 是一个android平台上一个轻量级的http网络请求及缓存框架.当前GalHttpRequest支持以下功能: 同步请求Stirng.InputStream.Bitma ...
- 项目中集成Easyui-Tree,可拖拽更新节点
由于公司架构较旧,使用的jdk版本为1.4,页面上也没有el表达式. Html <ul class="easyui-tree" id="data"> ...
- Shell合并两个文件成一个文件的两列paste,awk
Shell合并两个文件成一个文件的两列 发布时间:2014-07-20 编辑:www.jquerycn.cn Shell合并两个文件成一个文件的两列,提供了两种方法,普通shell脚本,awk脚本 ...
- 二十四种设计模式:桥接模式(Bridge Pattern)
桥接模式(Bridge Pattern) 介绍将抽象部分与它的实现部分分离,使它们都可以独立地变化. 示例有一个Message实体类,对它的操作有Insert()和Get()方法,现在使这些操作的抽象 ...