一、优点：
其实在没用Chrome开发之前就时不时的听到类似这样的话：“别用IE，IE太low了，用Chrome吧”。如今,我用过Chrome后才切身体会到，Chrome浏览器无疑是最受前端青睐的工具，原因除了界面简洁、大量的应用插件，良好的代码规范支持、强大的V8解释器，javascript执行速度和内存占有率表现非常优秀之外，还因为Chrome开发者工具提供了大量的便捷功能，方便我们前端调试代码，我们在日常开发中是越来越离不开Chrome，是否熟练掌握Chrome调试技巧恐怕也会成为考量前端技术水平的标杆。
二、Chrome 开发者工具介绍及调试、使用技巧：
1、先打开谷歌浏览器，然后打开调试界面，打开方式有三种 ：
第一：按F12，
第二：shift+ctrl+i，
第三：鼠标右键点审查元素
2、请看下边的标记
Element 标签页： 用于查看当前界面的html的Dom结构，和修改css的样式。css可以即时修改，即时显示。大大方便了开发者调试页面，这真是十分友好的~
Console 标签页：用于查看错误信息、打印调试信息(console.log())、写一些测试脚本以外，还可以当作Javascript API查看用。例如我想查看console都有哪些方法和属性，我可以直接在Console中输入"console"并执行~
Network 标签页：用于查看 HTTP 请求的详细信息，如请求头、响应头及返回内容等。
Source 标签页：用于查看和调试当前页面所加载的脚本的源文件，可以打断点进行调试。
TimeLine 标签页： 用于查看脚本的执行时间、页面元素渲染时间等信息。
Profiles 标签页：用于查看 CPU 执行时间与内存占用等信息。
Resource 标签页：用于查看当前页面所请求的资源文件，如 HTML，CSS 样式文件，图片等。
Audits 标签页：用于优化前端页面，加速网页加载速度等。
3、使用 Chrome 开发者工具调试
<1>设置(条件)断点
与 Java 调试类似，Chrome 开发者工具提供了断点设置、删除与断点存储等基本功能。同时，开发者工具也提供了设置条件断点的功能，使开发者可以控制该断点只有在满足某一条件时才会被触发。当然，也可以直接单纯地设置非条件断点。
在Source标签元素面板中对应的JS文件中的行号处点击右键，选择添加条件断点后，会弹出一个对话框用于输入具体的条件或者没有条件断点。合理运用好条件断点能够提高调试的效率与准确性，使开发人员能更专注于在期望的场景下进行调试。
还有一点就是可以在Source标签元素面板中查看元素属性，比如通过ajax返回的数据对象封装到data中，我们设置断点后直接将鼠标放到数据data中可以看到其中返回的是什么样的数据，比如data中是实体对象的每个属性字段值。
如图 Source标签元素面板中添加条件断点或断点
设置条件断点或断点
<2>Element 标签页对 CSS 的控制
在网页开发过程中，经常需要在脚本中控制不同条件下页面的样式展示，例如页面中的标签颜色，位置，大小等等，在 Chrome 开发者工具的 Element 标签页中，其实已经提供了包括该功能在内的一系列对样式进行实时修改的功能，并且在修改之后能够立即从页面中看到变化。如图
Element 标签页对 CSS 的控制
<3>修改 JavaScript 文件中的代码
这是 Chrome 开发者工具提供的一种非常实用的功能，即使开发人员可直接对开发者工具的 Source 标签页中的代码进行修改，并将其保存，使浏览器在下次执行该段脚本时，直接加载最新修改的版本。目前的 Firebug 及 IE 自带的开发者工具都不支持对脚本的直接修改，导致在 Firefox 或 IE 中调试脚本时，如果需要对代码进行修改，需要先去修改脚本源文件，再同步至应用服务器，再清理浏览器缓存，最终再次打开应用程序时，才会看到代码修改后的效果。可见 Chrome 开发者工具提供的这一功能，大大提供了开发者调试脚本的效果。
需要注意的是，由于这种修改是保存在浏览器缓存中，因此它不会影响到脚本的源文件。当开发人员决定采用修改之后的脚本时，需要将其复制到脚本的源文件中。
<4>使用控制台打印变量值或方法的返回结果
当断点被触发进入到调试模式时，我们可以将当前任意存在的变量或方法输入到控制台中，按下回车后，控制台便会返回相关的结果。该功能可使开发人员方便了解程序运行至断点处时各个所需要变量或方法的返回值。
需要注意的是，当在控制台中输入的方法名字不带括号时，控制台输出的是该方法所包含的代码信息，而并不是运行结果。
作者：wblearn
链接：https://www.jianshu.com/p/bee295965800
來源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
三、搜索引擎命令大全：
1、双引号
把搜索词放在双引号中，代表完全匹配搜索，也就是说搜索结果返回的页面包含双引号中出现的所有的词，连顺序也必须完全匹配。bd和Google 都支持这个指令。例如搜索： “seo方法图片”
2、减号
减号代表搜索不包含减号后面的词的页面。使用这个指令时减号前面必须是空格，减号后面没有空格，紧跟着需要排除的词。Google 和bd都支持这个指令。
例如：搜索 -引擎
返回的则是包含“搜索”这个词，却不包含“引擎”这个词的结果
3、星号
星号*是常用的通配符，也可以用在搜索中。百度不支持*号搜索指令。
比如在Google 中搜索：搜索*擎
其中的*号代表任何文字。返回的结果就不仅包含“搜索引擎”，还包含了“搜索收擎”，“搜索巨擎”等内容。
4、inurl
inurl: 指令用于搜索查询词出现在url 中的页面。bd和Google 都支持inurl 指令。inurl 指令支持中文和英文。
比如搜索：inurl:搜索引擎优化
返回的结果都是网址url 中包含“搜索引擎优化”的页面。由于关键词出现在url 中对排名有一定影响，使用inurl:搜索可以更准确地找到竞争对手。
5、inanchor
inanchor:指令返回的结果是导入链接锚文字中包含搜索词的页面。百度不支持inanchor。
比如在Google 搜索 ：inanchor:点击这里
返回的结果页面本身并不一定包含“点击这里”这四个字，而是指向这些页面的链接锚文字中出现了“点击这里”这四个字。
可以用来找到某个关键词的竞争对收，而且这些竞争对手往往是做过SEO 的。研究竞争对手页面有哪些外部链接，就可以找到很多链接资源。
6、intitle
intitle: 指令返回的是页面title 中包含关键词的页面。Google 和bd都支持intitle 指令。
使用intitle 指令找到的文件是更准确的竞争页面。如果关键词只出现在页面可见文字中，而没有出现在title 中，大部分情况是并没有针对关键词进行优化，所以也不是有力的竞争对手。
7、allintitle
allintitle:搜索返回的是页面标题中包含多组关键词的文件。
例如 ：allintitle:SEO 搜索引擎优化
就相当于：intitle:SEO intitle:搜索引擎优化
返回的是标题中中既包含“SEO”，也包含“搜索引擎优化”的页面
8、allinurl
与allintitle: 类似。
allinurl:SEO 搜索引擎优化
就相当于 ：inurl:SEO inurl:搜索引擎优化
9、filetype
用于搜索特定文件格式。Google 和bd都支持filetype 指令。
比如搜索filetype:pdf SEO
返回的就是包含SEO 这个关键词的所有pdf 文件。
10、site
site:是SEO 最熟悉的高级搜索指令，用来搜索某个域名下的所有文件。
11、linkdomain
linkdomain:指令只适用于雅虎，返回的是某个域名的反向链接。雅虎的反向链接数据还比较准
确，是SEO 人员研究竞争对手外部链接情况的重要工具之一。
比如搜索
linkdomain:http://cnseotool.com-site:http://cnseotool.com
得到的就是点石网站的外部链接，因为-site:http://cnseotool.com已经排除了点石本身的页面，也就是内部
链接，剩下的就都是外部链接了。
12、related
related:指令只适用于Google，返回的结果是与某个网站有关联的页面。比如搜索
related:http://cnseotool.com
我们就可以得到Google 所认为的与点石网站有关联的其他页面。 这种关联到底指的是什么，Google 并没有明确说明，一般认为指的是有共同外部链接的网站。
上面介绍的这几个高级搜索指令，单独使用可以找到不少资源，或者可以更精确地定位竞争对
手。把这些指令混合起来使用则更强大。
inurl:gov 减肥
返回的就是url 中包含gov，页面中有“减肥”这个词的页面。很多SEO 人员认为GVM和学校网
站有比较高的权重，找到相关的GVM和学校网站，就找到了最好的链接资源。
下面这个指令返回的是来自.中国教育和科研计算机网CERNET，也就是学校域名上的包含“交换链接”这个词的页面：
inurl:.中国教育和科研计算机网CERNET交换链接
从中SEO 人员可以找到愿意交换链接的学校网站。
或者使用一个更精确的搜索：
inurl:.中国教育和科研计算机网CERNETintitle:交换链接
返回的则是来自中国教育和科研计算机网CERNET域名，标题中包含“交换链接”这四个字的页面，返回的结果大部分应
该是愿意交换链接的学校网站。
再比如下面这个指令：
inurl:中国教育和科研计算机网CERNET*register
返回的结果是在.中国教育和科研计算机网CERNET域名上，url 中包含“forum”以及“register”这两个单词的页面，也就是
学校论坛的注册页面。找到这些论坛，也就找到了能在高权重域名上留下签名的很多机会。
下面这个指令返回的是页面与减肥有关，url 中包含links 这个单词的页面：
减肥 inurl:links
很多站长把交换链接页面命名为links.html 等，所以这个指令返回的就是与减肥主题相关的交换
链接页面。
下面这个指令返回的是url 中包含http://gov.cn以及links 的页面，也就是GVM域名上的交换链接页面：
allinurl:gov.cn+links
最后一个例子，在雅虎搜索这个指令：
linkdomain:http://cnseotool.com-linkdomain:http://cnseotool.com
返回的是链接到点石网站，却没有链接到我的博客的网站。使用这个指令可以找到很多连向你
的竞争对手或其他同行业网站，却没连向你的网站的页面，这些网站是最好的链接资源。
高级搜索指令组合使用变化多端，功能强大。一个合格的SEO必须熟练掌握这几个常用指令的
意义及组合方法，才能更有效率地找到更多竞争对手和链接资源。
找外链的时候你可以用这几种命令组合，例如site:.com inurl:blog “post a comment” -”comments closed” -”you must be logged in” “输入你的关键词“，
site:.com 是 指， 只显示.com的网站。 如果你想要 org的链接，就换成 site:.org，inurl:blog 是指博客。
“post a comment” -”comments closed” -”you must be logged in” 是指， “能够写评论的” 减去“ 关闭评论的” 再减去“ 必须要登录才能写评论的”。
作者：崔凯
链接：https://www.zhihu.com/question/20161362/answer/14180620
来源：知乎
https://segmentfault.com/a/1190000010302235
