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使用文档有说明: 下面我用人 ...
随机推荐
- Arduino可穿戴开发入门教程Windows平台下安装Arduino IDE
Arduino可穿戴开发入门教程Windows平台下安装Arduino IDE Windows平台下安装Arduino IDE Windows操作系统下可以使用安装向导和压缩包形式安装.下面详细讲解这 ...
- 【BZOJ 2288】 2288: 【POJ Challenge】生日礼物 (贪心+优先队列+双向链表)
2288: [POJ Challenge]生日礼物 Description ftiasch 18岁生日的时候,lqp18_31给她看了一个神奇的序列 A1, A2, ..., AN. 她被允许选择不超 ...
- [BZOJ2007][NOI2010]海拔(对偶图最短路)
首先确定所有点的海拔非0即1,问题转化成裸的平面图最小割问题,进而转化成对偶图最短路(同BZOJ1002). 这题的边是有向的,所以所有边顺时针旋转90度即可. 如下图(S和T的位置是反的). #in ...
- 【推导】【贪心】Codeforces Round #431 (Div. 1) A. From Y to Y
题意:让你构造一个只包含小写字母的可重集,每次可以取两个元素,将它们合并,合并的代价是这两个元素各自的从‘a’到‘z’出现的次数之积的和. 给你K,你构造的可重集必须满足将所有元素合而为一以后,所消耗 ...
- 【数论】【扩展欧几里得】hdu3579 Hello Kiki
解一元线性同余方程组(模数不互质) 结合看这俩blog讲得不错 http://46aae4d1e2371e4aa769798941cef698.devproxy.yunshipei.com/qq_27 ...
- SourceTree运行慢的解决方案
以下两个Git命令可以解决SourceTree运行慢: git gc git prune 可以在SourceTree点击命令行模式打开Git命令行窗口输入,等待片刻执行完成,SourceTree的运行 ...
- Problem G: 十进制数转换为二进制数
#include<stdio.h> int main() { ]; while(scanf("%d",&n)!=EOF) { ; ) { a[i++]=n%; ...
- textField代理方法
//textField代理方法// 返回no 不能输入文字- (BOOL)textField:(UITextField*)textField shouldChangeCharactersInRange ...
- virtualbox4.2.18 ubuntu12.04 The system is running in low-graphics mode
参考1:http://askubuntu.com/questions/225090/the-system-is-running-in-low-graphics-mode-error-in-virtua ...
- 统计中的t检验
1.什么情况下,应用t检验 1. 已知总体的均值m,或者我们假设了一个总体均值m: 2. 我们知道样本的个数n,样本的的方差var,样本的均值m: 3. 我们假设总体,或者样本都是服从正太分布的. 2 ...