码迷,mamicode.com
首页 > 编程语言 > 详细

第一节:JavaScript编码和调试

时间:2017-07-31 13:23:46      阅读:210      评论:0      收藏:0      [点我收藏+]

标签:sublime   机器   note   tool   img   性能   列表   mon   deb   

(转自老惠的博客

一、前言

 

工欲善其事,必先利其器。事和器之间是对应的,做什么事用什么工具,这是有讲究的。

 

对于JavaScript来说(当然并不仅仅限于JavaScript,其他语言也是如此),我认为学习的工具和生产的工具,还是区别开来会更好一些。在生产中,一切以生产效率为目标,使用功能强大的IDE是不二的选择。而学习,自动化太高的工具,反而会阻碍你的学习。当然,如果你是一名熟练的工程师,可以不用考虑这些问题。

 

我的习惯是,当要学习新技术,或者新语言的时候,我喜欢手工代码,会用一个简洁、方便的文本编辑器,比如EditPlus编写代码,编译也是用命令行的方式手工进行,这让我洞察语言或者技术的本质原理,了解更多的细节。然后,我会找一个代表性的开源项目,用IDE分析它的源代码,从而掌握这门语言或者技术是如何在生产环境中解决实际问题的。

 

二、编码工具

 

只要是编辑文本的工具,都可以用以JavaScript编码。不过,考虑到性能、效率,以及方便性,大家用的比较多的还是EditPlus、UltraEdit、EmEditor、Notepad++、Sublime Text,以及WebStorm、Visual Studio等。后两个是专业的IDE,属于重量级开发工具。

 

EditPlus小巧方便、功能强大,用起来很是顺手。一般通过目录来组织和管理项目文件。

 

技术分享

 

不过EditPlus默认使用IE浏览器,而且是”无缝浏览器“,打开的浏览器页面,也在EditPlus的一个子文档页面,无法使用浏览器的”开发者工具“,对于复杂JS代码的调试很不方便。可以通过首选项设置来修改浏览器的配置。

 

技术分享

这样浏览网页的时候可以打开外部的浏览器,按F12进行调试。

 

技术分享

技术分享

EditPlus是收费软件,如果你不愿意花钱注册,可以使用Notepad++。Notepad++可以使用工程管理项目。

 

技术分享

技术分享

 

然后可以"从目录添加文件",将你的项目文件添加到工程,方便管理。

 

技术分享

 

当然,别忘了保存工作区。

 

技术分享

 

可以通过快捷键打开设置好的浏览器浏览页面、调试程序。你可以修改运行浏览器的快捷键,以符合你的个人习惯。

 

技术分享

技术分享

 

Sublime Text是一个功能强大的代码编辑器,是收费软件,但可以无限期试用。Sublime Text可以通过插件扩展、增强功能,所以功能强大,而且很好玩,深受程序员喜爱。安装插件的方法主要有两个。

 

安装方法一:直接安装。

 

可以直接下载插件安装包,解压缩到Packages目录。Packages目录可以通过菜单->preferences->browse packages查看。

 

技术分享

技术分享

 

安装方法二:使用Package Control组件安装。

 

通过菜单->Perferences->package control,调出Install Package,然后在列表中选中要安装的插件。

 

技术分享

技术分享

技术分享

 

比如说,我们希望在Sublime Text工作环境中可以直接打开浏览器,以查看网页的效果进行调试,可以安装一款很实用的右键菜单增强插件SideBarEnhancements。在Sublime Text左侧FOLDERS栏中的右键菜单功能就会增强很多。

 

该插件还能让我们自定义快捷键设置使用哪款浏览器,点击菜单栏的preferences->package setting->side bar->Key Building-User,进行设置。

 

技术分享

技术分享

 

这样,你就可以直接通过右键菜单,或者快捷键打开浏览器来查看网页了。

 

技术分享

 

安装SublimeTmpl插件可以快速生成文件模板,比如快捷键“ctrl+alt+h”生成HTML文件模板。

 

技术分享

 

安装better completion插件,支持Javascript、JQuery、Twitter Bootstrap框架、HTML5标签属性提示。

 

技术分享

 

注意配置文件,首先将preferences->package setting->sublime better completion->Settings-Default中的配置内容复制到preferences->package setting->sublime better completion->Settings-User中,然后进行修改。

 

比如,现在启用JQuery自动完成,则修改“"jquery": false,”为“"jquery": true,”。

 

技术分享

 

通过配置,可以在Sublime Text内运行javascript,不用打开外部浏览器进行浏览调试,查看代码运行效果。

 

第一步:安装Node.js

 

安装完后,要看下是否配置好了nodejs的环境变量。

 

技术分享

然后,在命令行中输入node指令测试一下。

技术分享

 

第二步:添加build system

 

点击菜单Tools -> Build System -> New Build System,输入配置信息并保存。

 

技术分享

技术分享

技术分享

然后,可以在Sublime Text内直接运行JavaScript了。

技术分享

 

三、代码调试

 

没有谁写代码能够一蹴而就。验证思路、追踪bug、解决错误,调试伴随着我们编码的全过程。好的调试方法和工具,可以极大地提高我们的编码效率。

 

我们一般在浏览器中运行我们的代码,可以通过提示信息,比如alert语句、console.log语句,来验证输出结果是否和我们预想的一致。也可以用F12调出浏览器的开发者工具,对代码进行断点调试。

 

比如,有一个函数sayHello,我们要调试它。

 

function sayHello(name){

    var msg = "你好,"+name;

    console.log(msg);

}

 

我们用EditPlus编写了两个文件。

 

test.js

技术分享

test.html

技术分享

 

根据前面讲的,我们可以设置EditPlus调用外部浏览器打开HTML页面,并通过快捷键F12调出浏览器的开发者工具,刷新页面,我们在控制台看到了程序的输出结果。

 

技术分享

你可以点击“Source”查看源代码,并通过鼠标点击添加断点,刷新页面重新加载网页,就可以进行断点调试了。

 

技术分享

 

当然,功能强大的IDE,将编码、调试集成在了一起,用起来就很方便。方便是有代价的,这些工具为你的生产提高了效率,你就要交出你的money了。WebStorm、Visual Studio等,就是这样的工具。这里讲一下功能最强大,用起来最方便的Visual Studio,其他的工具,你可以根据自己的喜好,选择学习和使用。

 

首先创建一个网站项目。简单明了起见,我们创建一个空项目,然后把刚才那两个文件复制到工程中。

 

技术分享

我们这次直接把断点加在网页中。

技术分享

运行程序,就会停在断点的地方。

技术分享

逐步运行,查看程序运行结果。

技术分享

 

四、总结

 

JavaScript,本是一种为Web浏览器设计的脚本语言,但近几年,已经广泛应用于各种软件应用中。不仅有运行在服务端的JavaScript代码,也有了用来驱动iOS和Android应用的JavaScript代码,甚至还有的用来控制机器人。因此用什么样的工具好,要根据自己的工作场景和需求,选择适合的工具。

第一节:JavaScript编码和调试

标签:sublime   机器   note   tool   img   性能   列表   mon   deb   

原文地址:http://www.cnblogs.com/huiyong/p/7262571.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!