页面制作 Chapter 2--开发、调试工具

Sublime Text 2(Sublime Text官网  http://www.sublimetext.com/)

常用快捷键

1.Goto Anything   查找(Ctrl+P)

  • 直接输入文件名,可进行模糊查找
  • :+行号,直接跳到指定的行号(查找某一行有一个快捷键 Ctrl+G,直接输入行号即可)
  • @ +函数名,快速查找到制定的函数,@+CSS选择器名,快速查找样式(有一个直接的快捷键 Ctrl+R)
  • # +关键字,就能匹配到关键字(有一个直接的快捷键 Ctrl+;)

2.命令面板(Ctrl+Shift+P)

输入关键字,通过模糊匹配找到想要的命令,这样就不需要记住很多命令

比如想关掉/打开边栏,就输入side,找到匹配到的side bar,回车即可。可以看到快捷键是Ctrl+K Ctrl+B

3.多行选择(Ctrl+D,Ctrl+Shift+L)

  • 向下同时选中下一个相同的文本 (反复按Ctrl+D)
  • 一次性选择全部的相同文本 (Alt+F3)
  • 跳过当前选中的这个,选择下一个(Ctrl+K Ctrl+D)

4.常用插件

首先要安装Package Control

安装方法:打开View(ctrl+`)>Show Console,打开Package Control的地址(https://packagecontrol.io/installation#st2),在这里找到需要粘贴到Console的代码 ,然后回车即开始安装。安装完成后,重启ST,打开ST后,若安装成功则在Preferences下面能找到Package Control,打开Package Control命令面板,输入你想要安装的插件名称,然后回车即开始自动安装。

常用的插件:

  • Emmet(关于如何使用Emmet快速编写html和css,参考http://www.iteye.com/news/27580)
  • DocBlockr(提供文件注释,方便后期根据注释生成API文档,输入 “/**” + enter调出注释模板 (在function的上面一行才有效果)
  • SideBarEnhancements(现在只支持SublimeText3了)

现在在Sublime Text 2中已经搜索不到这个插件了,如果是Sublime Text 2 需要手动安装这个插件,在网上下载这个插件,然后通过菜单中Preferences -> Browse Packages 找到插件目录,然后把插件解压放到这个目录下即可(可能需要重启Sublime)。

  • Terminal(允许在Sublime Text2中打开cmd命令窗口,很实用的一个插件,安装好该插件好,打开cmd命令窗口的快捷键是Ctrl+Shift+T)

更多插件下载地址:https://packagecontrol.io/

5.快速新建一个html文件的方法

新建一个文件(Ctrl+N),当我们想要把文件语法设置为html时,总是不厌其烦的打开右下角的Plain Text,然后再找到html,这个过程重复性太高。比较快捷的方式是打开命令面板(Ctrl+Shift+P),然后输入ss:html进行模糊匹配,找到Set Syntax:HTML 回车即可,其他的文件类型设置类似。(当我听了慕课老师的这个快捷方法,当时心里真的很激动,把我解放了,哈哈哈~~)如果安装了Emmet,输入!或者html:5,再按Tab键就能自动补全html代码,很省事,有木有!

6.注释

ctrl+/ 单行注释(去掉某行的注释符号也是同样快捷键)

ctrl+shift+/块注释( 注释已选择内容),sublime会自动根据语言选择注释方式。

7.Snippets(把重复使用的代码建立成代码片段)

新建代码片段: tools>new Snippets

编写和保存snippet:

  • 在content标签里的CDATA的[]里编写代码片段的内容,即截图红色部分
  • 在tabTrigger标签里编写代码片段的关键字(这里可以理解为你给函数命名,通过关键字自动调用)
  • 在scope标签里编写该代码片段的使用文件范围

最后将文件保存时,后缀必须是.sublime-snippet,并且保存在默认的路径下,不能修改路径。

保存好之后,在任意一个html文件中输入代码片段的关键字然后按tab键就调用了!

8.开启Vim兼容模式

Preferences>Settings-User,删除“ignored_packages”里的  "Vintage"

9.Sublime Text 学习视频网址推荐

国外的一个Sublime Text2教学视频  http://code.tutsplus.com/courses/perfect-workflow-in-sublime-text-2

最近在看慕课网上的Sublime Text3入门视频,个人觉得讲的不错的。http://www.imooc.com/learn/333

10.调试工具

大多数的浏览器都自带调试工具,它们大同小异。个人比较喜欢用FireFox和Chrome。

F12打开浏览器的调试工具,在页面制作中,主要是查看Elements面板,查看html和css,通过增删改查来调试。活用放大镜查看你想看的元素,就能看到这个元素对应的html

和css。

IE8+的IE浏览器自带的调试工具能够调试IE5,7至你现在安装的IE版本之间的任意版本。

IE6的效果可以安装IE Tester,如果你想调试,就必须安装IE6原生的浏览器和安装Internet Explorer Developer Toolbar。

btw:使用调试工具就是熟能生巧,多看,多练。

Chrome调试器文档:https://developer.chrome.com/devtools

FireFox调试器文档:https://developer.mozilla.org/zh-CN/docs/Tools/Debugger

FireBug:http://getfirebug.com/

IE调试器文档:https://msdn.microsoft.com/library/bg182326(v=vs.85).aspx

时间: 2024-08-08 11:40:36

页面制作 Chapter 2--开发、调试工具的相关文章

页面制作 Chapter 3--HTML

先说一些废话.大三上学期刚开学那会,有点闲,因为这一学期是在机房封闭式上课,前几周上三门课:管理信息系统,UML系统建模与分析设计,JAVA,后三周上JSP,MYSQL,软件测试LoadRunner.前几周的晚上没课,又没事干,然后就开始自学html,当时数学院的老乡给了我一摞ACCP6.0的书,有一本是<使用HTML语言和CSS开发商业站点>,然后我就开始了每天晚上边敲边看,因为所见即所得,当时就觉得挺有意思.那是也不知道有什么更好的IDE,就用的电脑里装的UltraEdit,也没用电脑里的

页面制作 Chapter 1--PhotoShop切图笔记

由于自己大二自己玩过PS,所以,这节课就相对容易点.但是,PS不经常用的后果就是快捷键容易忘...... 1.PS首选项的设置 编辑>首选项>单位与标尺,把标尺和文字单位改成像素 2.创建切图需要的工作区,关闭不需要的面板(窗口>工作区>新建工作区>保存工作区),右上角选择工作区 a.信息面板(F8) b.图层面板(F7) c.历史记录面板 d.工具栏 e.选项栏 3.切图常用的工具 a.移动工具(选择图层.移动图层) b.矩形选框工具(选择矩形框,查看信息面板,获取选中区域

页面制作之调试工具

页面制作之调试工具 转载于http://www.cnblogs.com/jingwhale/p/4509160.html 网易云课堂笔记 常用的调试工具有Chrome浏览器的调试工具,火狐浏览器的Firebug插件调试工具,IE的开发人员工具等.它们的功能与使用方法大致相似.Chrome浏览器简洁快速,功能强大这里主要介绍Chrome浏览器的调试工具. 打开 Google Chrome 浏览器,通过下面任何一种方式进入开发人员工具: -点击位于浏览器用户界面右上角的“页面”下拉菜单,“更多工具”

页面制作之开发工具

页面制作之开发工具 转载于http://www.cnblogs.com/jingwhale/p/4421021.html 网易云课堂笔记 开发工具介绍 开发工具一般分为两种类型:文本编辑器和集成开发环境(IDE) 常用的文本编辑器:Sublime Text.Notepad++.EditPlus等 常用的IDE:WebStorm.Intellij IDEA.Eclipce等 我们这里主要介绍如何使用Sublime Text编辑器,它基本满足我们对前端开发工具的需求. 一.Sublime Text的

前端技术-开发调试工具

页面制作之开发调试工具(1) 开发工具介绍 开发工具一般分为两种类型:文本编辑器和集成开发环境(IDE) 常用的文本编辑器:Sublime Text.Notepad++.EditPlus等 常用的IDE:WebStorm.Intellij IDEA.Eclipce等 我们这里主要介绍如何使用Sublime Text编辑器,它基本满足我们对前端开发工具的需求. 一.Sublime Text的特点: 跨平台.启动快 多行选择 各种实用插件 Snippets 支持VIM兼容模式 Sublime Tex

页面制作课程大纲以及学习进度

页面制作  开课时间:5月25日 单元(章) 课题(节) 视频名 学习天数 发布时间 1.Photoshop切图 1.工具.面板.视图 1.工具.面板.视图 3 5.25发布 2.测量.取色 1.测量.取色 3.切图 1.切图 4.保存 1.保存 5.修改.维护 1.修改.维护 6.图片优化与合并 1.图片优化与合并 2.开发.调试工具 1.开发.调试工具 1.开发工具 3 2.调试工具 3.HTML 1.HTML简介 1.发展史.概念 2.HTML文档 2.标签 1.语法 2.章节标签 3.文

【干货】微信场景之H5页面制作免费工具大集合

营销代有手段出,各领风骚数百天.要说现在哪些营销方式最能传播,屡屡刷爆朋友圈的H5页面肯定就是首当其冲的,提到H5页面,就立马想到"围住神经猫",上线微信朋友圈3天的时间便创造了用户500万,访问量超1亿的神话. H5如此势头,不得不让营销人对H5页面的未来充满了期待,越来越多的人开始在营销中运用H5页面.其实在移动端各个领域,H5页面的叫法很多,也会称为翻翻看.手机微杂志.广告页.场景应用.海报\画报(动态海报.指尖海报.掌中海报.动画海报.微画报.微海报)等等,经常能见到的就是滑动

页面制作之HTML

标签 常用属性 id class style title — <a href ="/" title="收藏">收藏</a>(用于hover时出现title提示)  文档章节 body header 可以包括标题.Logo.搜索表单.独立章节头部等: nav 可以包括有导航性质的内容: aside 和主要内容无关区域,如侧边栏.插入广告.工具性内容: article   主题内容,独立可重复的内容,如论坛的帖子.博客的评论.新闻文章等独立内容,

Web开发调试工具——FireBug

在跟着牛老师做新闻发布系统的时候,牛老师在讲CSS之前建议我们安装Firefox+FireBug的组合,便于对我们自己编写的网页进行调试.当时我的电脑里没有Firefox浏览器,因此我就想,难道只有Firefox浏览器有调试插件FireBug吗?我认为不是的.因此我就尝试给Sogou浏览器安装调试工具,那么Sogou的调试工具是什么呢?我们先来看看FireBug是什么吧. 在百度搜索框里输入"FireBug",百度一下,我们看到FireBug是很强大的一款Web开发工具.其在百度百科的