狠狠撸

狠狠撸Share a Scribd company logo
Chapter 2
   工欲善其事 ...
—— 开发 Web 项目工具的选择
对于浏览器
推荐使用:(按推荐程度排序)
? Google Chrome
    HTML5 、 WebGL 支持、即时调试
? Mozilla Firefox
    众多的插件、较为标准
? Internet Explorer
    用户群体众多
对于浏览器
   Chrome 在“审查元素”中做出的修改
   会即时更新到页面上
对于浏览器
不推荐使用:
? IE 内核的非 IE 浏览器
    不规范或使用旧的内核
    ( 360 、搜狗、腾讯 TT 等)
? Opera
    兼容性不够好,有自己的表现标准
    (只是不适合用于开发)
开发环境
? 记事本 + 浏览器
   优点:简单方便

  缺点:不适合编写较复杂页面
      没有代码高亮和自动补全
开发环境
? 记事本 + 浏览器
              记事本编辑并保存后,可以直接
              刷新浏览器查看修改后的效果
开发环境
? Eclipse
     优点:开源,可以自由扩展
          大量的辅助插件
          适合搭建各类开发平台

            缺点:需要 JRE 支持
                配置较复杂(目前已有 JS 版)


下载配置后的版本:
http://code.google.com/p/easyclipse/downloads/detail?name=easy-eclipse-js-3.7.2.rar&can=2&q=#makechanges
开发环境        直接建立静态 Web 项目

? Eclipse




                     界面中有内嵌浏览器可以
                     直接看到效果
开发环境
? EmEditor
    优点:相当于 notepad 的加强版
           支持语法高亮和即时浏览

            缺点:非开源



下载配置后的版本:
http://code.google.com/p/easyclipse/downloads/detail?name=EmEditor-for-Web-
      Developer.rar&can=2&q=#makechanges
开发环境
                   JSLint 扩展

? EmEditor




             遇到 HTML 文
             件自动开启
             Web 预览
开发环境
? JSLint 插件
                                JSLint 是一个 JavaScript
                                验证工具(非开源),可
                                以扫描 JavaScript 源代码
                                来查找问题。如果 JSLint
                                发现一 个问题, JSLint 就
                                会显示描述这个问题的消息
                                ,并指出错误在源代码中的
                                大致位置。

                                JSLint 可用于包括
                                Editplus 、 EmEditor 等编
                                辑器。



              官方网站 http://www.jslint.com/lint.html
小试牛刀
? 配置自己的 Web 开发插件:
   选择自己喜欢的开放式编辑器,为其添加
  HTML 、 javascript 、 CSS 的语法高亮,增加
  Web 浏览功能。

? gVim

? Editplus

? Emacs for Windows
配置好的 gVim

More Related Content

Viewers also liked (17)

UC and Prototyping
UC and PrototypingUC and Prototyping
UC and Prototyping
Jash Mehta
?
Lesson of Love
Lesson of Love   Lesson of Love
Lesson of Love
DrSonica Krishan
?
Higher Purpose and Stakeholder Orientation
Higher Purpose and Stakeholder OrientationHigher Purpose and Stakeholder Orientation
Higher Purpose and Stakeholder Orientation
PollenStrategy
?
第4章 自顶向下的语法分析
第4章 自顶向下的语法分析第4章 自顶向下的语法分析
第4章 自顶向下的语法分析
tjpucompiler
?
Marc Lewis Theory
Marc Lewis TheoryMarc Lewis Theory
Marc Lewis Theory
Molew1527
?
???????????????????????2
???????????????????????2???????????????????????2
???????????????????????2
Mobile_Clinic
?
Utilaje de transport (Rumanian)
Utilaje de transport (Rumanian)Utilaje de transport (Rumanian)
Utilaje de transport (Rumanian)
Silos Cordoba
?
Fox 13 fieldexperience
Fox 13 fieldexperience Fox 13 fieldexperience
Fox 13 fieldexperience
megfole
?
Women-and-Men-Morality-and-Ethics
Women-and-Men-Morality-and-EthicsWomen-and-Men-Morality-and-Ethics
Women-and-Men-Morality-and-Ethics
Mut Somoeun
?
世界一周は0円で行け!ピースボートスタッフが教える「これから」のグローバル力
世界一周は0円で行け!ピースボートスタッフが教える「これから」のグローバル力世界一周は0円で行け!ピースボートスタッフが教える「これから」のグローバル力
世界一周は0円で行け!ピースボートスタッフが教える「これから」のグローバル力
schoowebcampus
?
Presentation 1
Presentation 1Presentation 1
Presentation 1
TARUN_KNAPP
?
Technogy
TechnogyTechnogy
Technogy
eperiod
?
Salam_Tradisional_Orang_Kamboja
Salam_Tradisional_Orang_KambojaSalam_Tradisional_Orang_Kamboja
Salam_Tradisional_Orang_Kamboja
Mut Somoeun
?
More or Less - Practicing Medicine in 2013: What's Out and What's Here to Stay
More or Less - Practicing Medicine in 2013: What's Out and What's Here to StayMore or Less - Practicing Medicine in 2013: What's Out and What's Here to Stay
More or Less - Practicing Medicine in 2013: What's Out and What's Here to Stay
PowerYourPractice
?
Edpa 2012 Presentation Without Video
Edpa 2012 Presentation Without VideoEdpa 2012 Presentation Without Video
Edpa 2012 Presentation Without Video
Christopher Kappes
?
第5章 自底向上的语法分析
第5章 自底向上的语法分析第5章 自底向上的语法分析
第5章 自底向上的语法分析
tjpucompiler
?
UC and Prototyping
UC and PrototypingUC and Prototyping
UC and Prototyping
Jash Mehta
?
Higher Purpose and Stakeholder Orientation
Higher Purpose and Stakeholder OrientationHigher Purpose and Stakeholder Orientation
Higher Purpose and Stakeholder Orientation
PollenStrategy
?
第4章 自顶向下的语法分析
第4章 自顶向下的语法分析第4章 自顶向下的语法分析
第4章 自顶向下的语法分析
tjpucompiler
?
Marc Lewis Theory
Marc Lewis TheoryMarc Lewis Theory
Marc Lewis Theory
Molew1527
?
???????????????????????2
???????????????????????2???????????????????????2
???????????????????????2
Mobile_Clinic
?
Utilaje de transport (Rumanian)
Utilaje de transport (Rumanian)Utilaje de transport (Rumanian)
Utilaje de transport (Rumanian)
Silos Cordoba
?
Fox 13 fieldexperience
Fox 13 fieldexperience Fox 13 fieldexperience
Fox 13 fieldexperience
megfole
?
Women-and-Men-Morality-and-Ethics
Women-and-Men-Morality-and-EthicsWomen-and-Men-Morality-and-Ethics
Women-and-Men-Morality-and-Ethics
Mut Somoeun
?
世界一周は0円で行け!ピースボートスタッフが教える「これから」のグローバル力
世界一周は0円で行け!ピースボートスタッフが教える「これから」のグローバル力世界一周は0円で行け!ピースボートスタッフが教える「これから」のグローバル力
世界一周は0円で行け!ピースボートスタッフが教える「これから」のグローバル力
schoowebcampus
?
Salam_Tradisional_Orang_Kamboja
Salam_Tradisional_Orang_KambojaSalam_Tradisional_Orang_Kamboja
Salam_Tradisional_Orang_Kamboja
Mut Somoeun
?
More or Less - Practicing Medicine in 2013: What's Out and What's Here to Stay
More or Less - Practicing Medicine in 2013: What's Out and What's Here to StayMore or Less - Practicing Medicine in 2013: What's Out and What's Here to Stay
More or Less - Practicing Medicine in 2013: What's Out and What's Here to Stay
PowerYourPractice
?
Edpa 2012 Presentation Without Video
Edpa 2012 Presentation Without VideoEdpa 2012 Presentation Without Video
Edpa 2012 Presentation Without Video
Christopher Kappes
?
第5章 自底向上的语法分析
第5章 自底向上的语法分析第5章 自底向上的语法分析
第5章 自底向上的语法分析
tjpucompiler
?

Similar to Web设计 2 工欲善其事(开发web项目工具的选择) (20)

Elixir 好用的編輯器
Elixir 好用的編輯器Elixir 好用的編輯器
Elixir 好用的編輯器
bobo52310
?
富文本编辑器在互联网上的应用
富文本编辑器在互联网上的应用富文本编辑器在互联网上的应用
富文本编辑器在互联网上的应用
luolonghao
?
础苍诲谤辞颈诲快速发布&补尘辫;持续集成
础苍诲谤辞颈诲快速发布&补尘辫;持续集成础苍诲谤辞颈诲快速发布&补尘辫;持续集成
础苍诲谤辞颈诲快速发布&补尘辫;持续集成
whykill
?
钱宝坤:多浏览器集成的闯补惫补厂肠谤颈辫迟单元测试工具
钱宝坤:多浏览器集成的闯补惫补厂肠谤颈辫迟单元测试工具钱宝坤:多浏览器集成的闯补惫补厂肠谤颈辫迟单元测试工具
钱宝坤:多浏览器集成的闯补惫补厂肠谤颈辫迟单元测试工具
taobao.com
?
前端开发学习介绍
前端开发学习介绍前端开发学习介绍
前端开发学习介绍
peterju
?
移动端跨平台技术原理
移动端跨平台技术原理移动端跨平台技术原理
移动端跨平台技术原理
gorillazf
?
前端常用调试工具介绍
前端常用调试工具介绍前端常用调试工具介绍
前端常用调试工具介绍
taobao.com
?
美团前端架构介绍
美团前端架构介绍美团前端架构介绍
美团前端架构介绍
pan weizeng
?
前端开发工具 - 编辑器篇
前端开发工具 - 编辑器篇前端开发工具 - 编辑器篇
前端开发工具 - 编辑器篇
keelii
?
使用 TypeScript 駕馭 Web 世界的脫韁野馬:以 Angular 2 開發框架為例
使用 TypeScript 駕馭 Web 世界的脫韁野馬:以 Angular 2 開發框架為例使用 TypeScript 駕馭 Web 世界的脫韁野馬:以 Angular 2 開發框架為例
使用 TypeScript 駕馭 Web 世界的脫韁野馬:以 Angular 2 開發框架為例
Will Huang
?
奥别产教程2
奥别产教程2奥别产教程2
奥别产教程2
tamamadesu
?
构建可维护的Javascript 小米网
构建可维护的Javascript 小米网构建可维护的Javascript 小米网
构建可维护的Javascript 小米网
yang alex
?
五行完成网页多国语系
五行完成网页多国语系五行完成网页多国语系
五行完成网页多国语系
amostsai
?
前端调试工具,编码相关,性能相关
前端调试工具,编码相关,性能相关前端调试工具,编码相关,性能相关
前端调试工具,编码相关,性能相关
jay li
?
20141212 html5 及微軟跨平台佈局 long
20141212 html5 及微軟跨平台佈局   long20141212 html5 及微軟跨平台佈局   long
20141212 html5 及微軟跨平台佈局 long
Meng-Ru (Raymond) Tsai
?
前端性能测试
前端性能测试前端性能测试
前端性能测试
tbmallf2e
?
July.2011.w3ctech
July.2011.w3ctechJuly.2011.w3ctech
July.2011.w3ctech
Kai Cui
?
白玉磊 Webrebuild
白玉磊 Webrebuild白玉磊 Webrebuild
白玉磊 Webrebuild
裕波 周
?
石玉磊 Web rebuild
石玉磊 Web rebuild石玉磊 Web rebuild
石玉磊 Web rebuild
Webrebuild
?
Universal windows apps 開發—運用 html 及 java script
Universal windows apps 開發—運用 html 及 java scriptUniversal windows apps 開發—運用 html 及 java script
Universal windows apps 開發—運用 html 及 java script
Ian Chen
?
Elixir 好用的編輯器
Elixir 好用的編輯器Elixir 好用的編輯器
Elixir 好用的編輯器
bobo52310
?
富文本编辑器在互联网上的应用
富文本编辑器在互联网上的应用富文本编辑器在互联网上的应用
富文本编辑器在互联网上的应用
luolonghao
?
础苍诲谤辞颈诲快速发布&补尘辫;持续集成
础苍诲谤辞颈诲快速发布&补尘辫;持续集成础苍诲谤辞颈诲快速发布&补尘辫;持续集成
础苍诲谤辞颈诲快速发布&补尘辫;持续集成
whykill
?
钱宝坤:多浏览器集成的闯补惫补厂肠谤颈辫迟单元测试工具
钱宝坤:多浏览器集成的闯补惫补厂肠谤颈辫迟单元测试工具钱宝坤:多浏览器集成的闯补惫补厂肠谤颈辫迟单元测试工具
钱宝坤:多浏览器集成的闯补惫补厂肠谤颈辫迟单元测试工具
taobao.com
?
前端开发学习介绍
前端开发学习介绍前端开发学习介绍
前端开发学习介绍
peterju
?
移动端跨平台技术原理
移动端跨平台技术原理移动端跨平台技术原理
移动端跨平台技术原理
gorillazf
?
前端常用调试工具介绍
前端常用调试工具介绍前端常用调试工具介绍
前端常用调试工具介绍
taobao.com
?
美团前端架构介绍
美团前端架构介绍美团前端架构介绍
美团前端架构介绍
pan weizeng
?
前端开发工具 - 编辑器篇
前端开发工具 - 编辑器篇前端开发工具 - 编辑器篇
前端开发工具 - 编辑器篇
keelii
?
使用 TypeScript 駕馭 Web 世界的脫韁野馬:以 Angular 2 開發框架為例
使用 TypeScript 駕馭 Web 世界的脫韁野馬:以 Angular 2 開發框架為例使用 TypeScript 駕馭 Web 世界的脫韁野馬:以 Angular 2 開發框架為例
使用 TypeScript 駕馭 Web 世界的脫韁野馬:以 Angular 2 開發框架為例
Will Huang
?
构建可维护的Javascript 小米网
构建可维护的Javascript 小米网构建可维护的Javascript 小米网
构建可维护的Javascript 小米网
yang alex
?
五行完成网页多国语系
五行完成网页多国语系五行完成网页多国语系
五行完成网页多国语系
amostsai
?
前端调试工具,编码相关,性能相关
前端调试工具,编码相关,性能相关前端调试工具,编码相关,性能相关
前端调试工具,编码相关,性能相关
jay li
?
20141212 html5 及微軟跨平台佈局 long
20141212 html5 及微軟跨平台佈局   long20141212 html5 及微軟跨平台佈局   long
20141212 html5 及微軟跨平台佈局 long
Meng-Ru (Raymond) Tsai
?
前端性能测试
前端性能测试前端性能测试
前端性能测试
tbmallf2e
?
July.2011.w3ctech
July.2011.w3ctechJuly.2011.w3ctech
July.2011.w3ctech
Kai Cui
?
白玉磊 Webrebuild
白玉磊 Webrebuild白玉磊 Webrebuild
白玉磊 Webrebuild
裕波 周
?
石玉磊 Web rebuild
石玉磊 Web rebuild石玉磊 Web rebuild
石玉磊 Web rebuild
Webrebuild
?
Universal windows apps 開發—運用 html 及 java script
Universal windows apps 開發—運用 html 及 java scriptUniversal windows apps 開發—運用 html 及 java script
Universal windows apps 開發—運用 html 及 java script
Ian Chen
?

Web设计 2 工欲善其事(开发web项目工具的选择)

  • 1. Chapter 2 工欲善其事 ... —— 开发 Web 项目工具的选择
  • 2. 对于浏览器 推荐使用:(按推荐程度排序) ? Google Chrome HTML5 、 WebGL 支持、即时调试 ? Mozilla Firefox 众多的插件、较为标准 ? Internet Explorer 用户群体众多
  • 3. 对于浏览器 Chrome 在“审查元素”中做出的修改 会即时更新到页面上
  • 4. 对于浏览器 不推荐使用: ? IE 内核的非 IE 浏览器 不规范或使用旧的内核 ( 360 、搜狗、腾讯 TT 等) ? Opera 兼容性不够好,有自己的表现标准 (只是不适合用于开发)
  • 5. 开发环境 ? 记事本 + 浏览器 优点:简单方便 缺点:不适合编写较复杂页面 没有代码高亮和自动补全
  • 6. 开发环境 ? 记事本 + 浏览器 记事本编辑并保存后,可以直接 刷新浏览器查看修改后的效果
  • 7. 开发环境 ? Eclipse 优点:开源,可以自由扩展 大量的辅助插件 适合搭建各类开发平台 缺点:需要 JRE 支持 配置较复杂(目前已有 JS 版) 下载配置后的版本: http://code.google.com/p/easyclipse/downloads/detail?name=easy-eclipse-js-3.7.2.rar&can=2&q=#makechanges
  • 8. 开发环境 直接建立静态 Web 项目 ? Eclipse 界面中有内嵌浏览器可以 直接看到效果
  • 9. 开发环境 ? EmEditor 优点:相当于 notepad 的加强版 支持语法高亮和即时浏览 缺点:非开源 下载配置后的版本: http://code.google.com/p/easyclipse/downloads/detail?name=EmEditor-for-Web- Developer.rar&can=2&q=#makechanges
  • 10. 开发环境 JSLint 扩展 ? EmEditor 遇到 HTML 文 件自动开启 Web 预览
  • 11. 开发环境 ? JSLint 插件 JSLint 是一个 JavaScript 验证工具(非开源),可 以扫描 JavaScript 源代码 来查找问题。如果 JSLint 发现一 个问题, JSLint 就 会显示描述这个问题的消息 ,并指出错误在源代码中的 大致位置。 JSLint 可用于包括 Editplus 、 EmEditor 等编 辑器。 官方网站 http://www.jslint.com/lint.html
  • 12. 小试牛刀 ? 配置自己的 Web 开发插件: 选择自己喜欢的开放式编辑器,为其添加 HTML 、 javascript 、 CSS 的语法高亮,增加 Web 浏览功能。 ? gVim ? Editplus ? Emacs for Windows