新葡亰496net Web前端 十七个必需理解的chrome开荒者手艺

十七个必需理解的chrome开荒者手艺



再看这边文章之前,建议大家先看下“如何掌握谷歌的Chrome developer
tool调试技巧“。

# 16个必须知道的chrome开发者技巧

图片 1提前祝各位程序员节日快乐

今天要推荐的谷歌调试工具,觉得真不错,刚开始对于那些英文有点不习惯,用久就NO
PROBLEM啦。好吧,转载过来,分享给大家。工具名称是Chrome
Workspace。如下:

标签(空格分隔): chrome 开发技巧

再过几天就是1024程序员节日了,这里提前祝各位程序员同胞们节日快乐哈_

Workspace是个什么样的东西呢?他能够在开发者工具中调试修改js或者css同时自动保存文件,能够避免开发人员在工具中调试好,再到编辑器中修改一次代码的重复操作,能够提高一定的效率。


回归正题,本文主要是介绍一下Chrome developer
tool的使用,以方便我们的日常开发与调试。其实在没用Chrome开发之前就时不时的听到类似这样的话:“别用IE,IE太low了,用Chrome吧”。如今,我用过Chrome后才切身体会到,Chrome浏览器无疑是最受前端青睐的工具,原因除了界面简洁、大量的应用插件,良好的代码规范支持、强大的V8解释器,javascript执行速度和内存占有率表现非常优秀之外,还因为Chrome开发者工具提供了大量的便捷功能,方便我们前端调试代码,我们在日常开发中是越来越离不开Chrome,是否熟练掌握Chrome调试技巧恐怕也会成为考量前端技术水平的标杆。

之前这样的功能需要在本地开启一个sever端的服务。例如
autosave

> 文章来至于 [这里]()

对于前端技术的学习或者开发调试,浏览器developer
tool的使用是必不可少的,下面,介绍Chrome开发者工具。

目前Chrome的正式版已经集成了这个功能,就方便了开发者许多,如何使用呢?

在Web开发者中,Google
Chrome是使用最广泛的浏览器。六周一次的发布周期和一套强大的不断扩大开发功能,使其成为了web开发者必备的工具。你可能已经熟悉了它的部分功能,如使用console和debugger在线编辑CSS。在这篇文章中,我们将分享15个有助于改进你的开发流程的技巧。

<h5>1、先打开谷歌浏览器,然后打开调试界面,打开方式有三种
:第一:按F12,第二:shift+ctrl+i,第三:鼠标右键点审查元素</h5>
<h5>2、请看下边的标记</h5>

(如果你是使用Canary或者Chromiumde,Workspace已经不再是实验选项,跳过1,2项)1.在
chrome://flags/ 中启用 Developer Tools Experiments

## 一、快速切换文件

图片 2Chrome开发者工具分为
8 个大模块

2.在 Developer tools 设置 Experiments 选项下开启File system folders in
Sources Panel,再重启Developer tools,就会多出Workspace选项。

如果你使用过sublime text,那么你可能不习惯没有Go to
anything这个功能的覆盖。你会很高兴听到chrome开发者功能也有这个功能,当DevTools被打开的时候,按Ctrl+P(cmd+p
on mac),就能快速搜寻和打开你项目的文件。

Element 标签页: 用于查看和编辑当前页面中的 HTML 和 CSS 元素。Console
标签页:用于显示脚本中所输出的调试信息,或运行测试脚本等。Source
标签页:用于查看和调试当前页面所加载的脚本的源文件,可以打断点进行调试。Network
标签页:用于查看 HTTP
请求的详细信息,如请求头、响应头及返回内容等。TimeLine 标签页:
用于查看脚本的执行时间、页面元素渲染时间等信息。Profiles
标签页:用于查看 CPU 执行时间与内存占用等信息。Resource
标签页:用于查看当前页面所请求的资源文件,如 HTML,CSS
样式文件,图片等。Audits
标签页:用于优化前端页面,加速网页加载速度等。

3.Chrome为了确保安全,将目录添加到File
systems时会要求在目录中存在.allow-devtools-edit文件,才允许开发者工具添加目录编辑保存文件,所以需要在资源目录中创建这个名字的空文件,方式有很多,例如:在资源目录中执行命令

![xx]()

<h5>3、使用 Chrome
开发者工具调试</h5><h6><1>设置断点</h6>与 Java
调试类似,Chrome
开发者工具提供了断点设置、删除与断点存储等基本功能。
同时,开发者工具也提供了设置条件断点的功能,使开发者可以控制该断点只有在满足某一条件时才会被触发。当然,也可以直接单纯地设置非条件断点。</br>在Source标签元素面板中对应的JS文件中的行号处点击右键,选择添加条件断点后,会弹出一个对话框用于输入具体的条件或者没有条件断点。合理运用好条件断点能够提高调试的效率与准确性,使开发人员能更专注于在期望的场景下进行调试。</br>还有一点就是可以在Source标签元素面板中查看元素属性,比如通过ajax返回的数据对象封装到data中,我们设置断点后直接将鼠标放到数据data中可以看到其中返回的是什么样的数据,比如data中是实体对象的每个属性字段值。</br>如图
Source标签元素面板中添加条件断点或断点

Windows copy con .allow-devtools-edit 再 Ctrl + Z

## 二、在源代码中搜索

图片 3设置条件断点或断点

Mac touch .allow-devtools-edit

如果你希望在源代码中搜索要怎么办呢?在页面已经加载的文件中搜寻一个特定的字符串,快捷键是Ctrl

<h6><2>Element 标签页对 CSS
的控制</h6>在网页开发过程中,经常需要在脚本中控制不同条件下页面的样式展示,例如页面中的标签颜色,位置,大小等等,在
Chrome 开发者工具的 Element
标签页中,其实已经提供了包括该功能在内的一系列对样式进行实时修改的功能,并且在修改之后能够立即从页面中看到变化。
如图

4.在Workspace中把你的资源目录添加到File
systems即可,如果CSS,JS链的是URL可以使用Mappings来设置路由(注意:结尾千万不要加上,他逻辑只判断了是否以/结尾,否则就会变成path/,略坑啊~~)

  • Shift + F (Cmd + Opt + F),这种搜寻方式还支持正则表达式哦

图片 4Element
标签页对 CSS 的控制

现在就可以在开发者工具中各种调试了,你就可以看到你的源文件也跟着改动啦~。

![]()

<h6><3>修改 JavaScript 文件中的代码</h6>这是 Chrome
开发者工具提供的一种非常实用的功能,即使开发人员可直接对开发者工具的
Source
标签页中的代码进行修改,并将其保存,使浏览器在下次执行该段脚本时,直接加载最新修改的版本。
目前的
Firebug 及 IE 自带的开发者工具都不支持对脚本的直接修改,导致在 Firefox
或 IE
中调试脚本时,如果需要对代码进行修改,需要先去修改脚本源文件,再同步至应用服务器,再清理浏览器缓存,最终再次打开应用程序时,才会看到代码修改后的效果。可见
Chrome
开发者工具提供的这一功能,大大提供了开发者调试脚本的效果。</br>需要注意的是,由于这种修改是保存在浏览器缓存中,因此它不会影响到脚本的源文件。当开发人员决定采用修改之后的脚本时,需要将其复制到脚本的源文件中。

或者也可以在Sources中修改文件

## 三、快速跳转到指定行

<h6><4>使用控制台打印变量值或方法的返回结果</h6>当断点被触发进入到调试模式时,我们可以将当前任意存在的变量或方法输入到控制台中,按下回车后,控制台便会返回相关的结果。该功能可使开发人员方便了解程序运行至断点处时各个所需要变量或方法的返回值。</br>需要注意的是,当在控制台中输入的方法名字不带括号时,控制台输出的是该方法所包含的代码信息,而并不是运行结果。

缺陷无论是 autosave 还是 workspace 比较遗憾都不能支持SCSS,LESS的编辑

在Sources标签中打开一个文件之后,在Windows和Linux中,按Ctrl + G,(or Cmd

我们借助 Chrome
开发者工具的支持,可以提高网页应用程序开发与调试的效率。想了解更多,请参考资料Chrome
Developer Tools 官方文档

这个东西用过了,感觉还不错,提高了调试效率,慢慢习惯了,就不用FF的firebug,大家都知道FF太卡了~~

  • L for Mac),然后输入行号,DevTools就会允许你跳转到文件中的任意一行。

图片 5明天周六啦,再次提前祝各位猿猿们节日快乐

source:腾讯ISUX ()

![]()

另外一种方式是按Ctrl + O,输入:和行数,而不用去寻找一个文件。

## 四、在控制台选择元素

DevTools控制台支持一些变量和函数来选择DOM元素:

$()–document.querySelector()的简写,返回第一个和css选择器匹配的元素。例如$(‘div’)返回这个页面中第一个div元素

$$()–document.querySelectorAll()的简写,返回一个和css选择器匹配的元素数组。

$0-$4–依次返回五个最近你在元素面板选择过的DOM元素的历史记录,$0是最新的记录,以此类推。

标签:

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图