程序员浏览的网站

私单

最理想的单子还是直接接海外的项目，比如 freelance 等网站。一方面是因为挣的是美刀比较划算，像给WordPress写支付+发送注册码这种大家一个周末就能做完的项目，也可以到200~300美刀；另一方面是在国外接单子比较隐蔽。 国内 shixian 的价格也很不错，但是强烈建议大家不要在介绍中透漏实名和真实的公司部门信息，因为这实在太高调了。

有同学说，这是我的周末时间啊，我爱怎么用就怎么用，公司还能告我怎么的？ 虽然很多公司的劳动合同里边并不禁止做兼职，但在网上如此高调的干私活，简直就是在挑衅HR：「我工作不饱和」、「公司加班不够多」… 再想象下你一边和产品经理说这个需求做不完，一边自己却有时间做私单的样子。你自己要是老板也不愿提拔这样的人吧。 当然，猪八戒这种站我就不多说了，不太适合专业程序员去自贬身价。

Side Project

比起做私单，做一个Side Project会更划算。 Side Project的好处是你只需要对特定领域进行持续投入，就可以在很长时间获得收入。这可以让你的知识都在一棵树上分支生长，从而形成良好的知识结构，而不是变成一瓶外包万金油。 思路有两种： 一种是做小而美的，针对一个细分领域开发一个功能型应用，然后放到市场上去卖；另一种是做大而全的基础应用（想想WordPress），方便别人在上边直接添加代码，定制成自己想要的应用。 有同学会说，我写的Side Project卖不掉啊。项目方向的选取的确是比较有技巧的，但简单粗暴的解决方案就是找一个现在卖得非常好、但是产品和技术却不怎样的项目，做一个只要一半价格的竞品。

做咨询

如果你在技术圈子里边小有名气，或者在某一个业务上特别精通，那么通过做咨询来挣钱是一种更轻松的方式。和人在咖啡厅聊几个小时，几百上千块钱就到手了。 国内这方面的产品，我知道的有三个：

在行http://zaih: 这个是果壳旗下的，做得比较早，内容是全行业的，所以上边技术向的反而不多。

缘创派http://q.ycpai/h5/lightPartner/expertList: 缘创派的轻合伙栏目，主要面向创业者，适合喜欢感受创业氛围的技术专家们。

极牛http://geekniu: 你可以认为这是一个程序员版本的「在行」，我浏览了下，虽然被约次数比在行要低不少，但专业性比较强，期望他们能尽快的推广开来吧。

做咨询虽然也是实名的，但和私活是完全不同的。咨询的时间短，不会影响到正常的休息，更不会影响上班；而且大部分公司是鼓励技术交流的，所以大家的接受度都很高。 除了网站、APP外，我觉得收费群也是可以做的。现在交流的地方看似很多，但遇到问题后真正能快速帮你解决的地方却很少。比如可以搞一个技术创业群，找一些创过业的同学、正在创业的同学、做投资的同学、做法务的同学，面向想创业的同学开放，每人收个几百块的年费。然后你在创业过程中遇到的问题，都可以有人解答，不会觉得是孤零零的一个人。你问要是没遇到问题怎么办？没遇到问题不是开心死了么。

写文章

很多同学喜欢写技术博客，其实把文章投给一些网站是有稿费的。 比如InfoQ，他们家喜欢收3000~4000字的深度技术文章；稿费是千字150。虽然不算太多，但一篇长文的稿费也够买个入门级的Cherry键盘了。我喜欢InfoQ的地方是他们的版权要求上比较宽松。文章在他们网站发布后，你可以再发布到自己博客的；而且文章可以用于出书，只要标明原发于InfoQ即可。

顺便说一句，比起写文章，其实通过传统发行渠道出书并不怎么挣钱，我之前到手的版税是8%，如果通过网络等渠道销售，数字会更低。

教学视频

在线教育起来以后，录制教学视频也可以赚钱了。我个人比较喜欢 designcode.io 这种自主发行的模式，因为挣的钱比较多。 当然，问题又回到了现在那么多的免费视频，为什么要来买你的收费版？ 其实现在绝大部分教学视频，往往都真的只是教学，和现实世界我们遇到的问题截然不同。里边都是一堆简化后的假项目，为了教学而刻意设计的。 这里和大家分享一个我之前想操作的想法。 就是在自己决定开始做一个开源项目后，用录屏软件把整个过程完完整整的录下来。开源的屏幕录制工具 OBS ，1920*1080的屏幕录成FLV格式，一个小时只需要1G，一个T的移动硬盘可以录制上千小时，对一个中型项目来说也足够了。 等项目做完，就开源放到GitHub，让大家先用起来。等迭代稳定后，再从录制的全量视频中剪辑出一系列的教程，整理出一系列的文章，放到网站上做收费课程。 这样做有几个好处： 保证所有遇到的问题都是真实的，不是想象出来的，学习过这个课程的人，可以独立的将整个项目完整的实现。没有特意的录制过程，所以教程其实是软件开发的副产品，投入产出比更高。如果你的软件的确写得好，那么用过你软件的人可以成为你教程的客户或者推荐员；如果你的教程写得好，那么看完你的教程的人会成为你软件的客户或者推荐员。

内部推荐和猎头推荐

如果你在BAT等一流互联网公司工作，如果你有一帮志同道合的程序员朋友，那么基本上每个几个月你应该就会遇到有想换工作的同事和朋友，所以千万别错过你挣推荐费的大好时机。 一般来讲，公司内部推荐的钱会少一些，我见过的3000~6000的居多。但因为是自己公司，会比较靠谱，所以风险小一些。经常给公司推荐人才，还会提升老大多你的好感度，能优先就优先吧。 比起内部推荐，猎头推荐的推荐费则会多很多。一个30万年薪的程序员，如果是我推荐给猎头，成功入职后差不多可以拿到1万RMB的推荐费。

小结

学会挣钱是一件非常重要的事情，它会让你了解商业是如何运作的，帮助你理解公司的产品逻辑、以及为你可能的技术创业打下坚实的基础。 所以我鼓励大家多去挣零花钱，最好各种姿势都都试试，会有意想不到的乐趣。

第一款：TrueCrypt

TrueCrypt可能很多人没用过，它是一个加密软件，能够对磁盘进行加密。还在担心自己电脑中的重要文件、私密档案被人查看。什么，你以为把文件设置了隐藏属性别人就看不到了？：) ：）快来用TrueCrypt ，你必定会爱上它的。

特点：对某一磁盘分区进行加密，开启计算机后，如果你没有打开TrueCrypt 这个软件，这个被加密的分区是不会被显示出来的。打开TrueCrypt ，输入密码后，你就能在”我的电脑“里看到那个被加密的分区了。

软件截图（I盘即为经过AES加密的磁盘分区）：

第二款：Soureinsight

Soureinsight号称源代码阅读神奇，应该是阅读源代码最方便的软件，至今没有找到其替代产品。

特点：方便阅读项目代码，批量搜索，快捷查询函数调用关系等等。

软件截图：

Notepad++

上榜理由：软件内置支持多达27种语法高亮度显示，包括各种常见的源代码、脚本，能够很好地支持.nfo文件查看，还可显示缩进引导线，代码显示得很有层次感。

Notepad++对于HTML网页编程代码，可直接选择在不同的浏览器中打开查看，以方便进行调试；可显示选中文本的字节数，并非普通编辑器所显示的字数。另外还提供了一些实用工具，如邻行互换位置、宏功能等等。

VMwareWorkstation

上榜理由：软件可在一部实体机器上模拟完整的网络环境，以及可便于携带的虚拟机器，其更好的灵活性与先进的技术胜过了市面上其他的虚拟计算机软件。

Source Insight程序、代码编辑器

Source Insight不仅仅是一个强大的程序编辑器，它还能显示reference trees，class inheritance diagrams和call trees。Source Insight提供了最快速的对源代码的导航和任何程序编辑器的源信息。Source Insight拥有内置的对C/C++, C#和Java等程序的分析。Source Insight能分析你的源代码并在你工作的同时动态维护它自己的符号数据库，并自动为你显示有用的上下文信息。优点：方便阅读项目代码，批量搜索，快捷查询函数调用关系。

Beyond Compare

上榜理由：是一款不可多得的代码比较软件，使用Beyond Compare可以很方便地对比出两份源代码文件的不同之处，相差的每一个字节用颜色加以表示，查看方便。

Beyond Compare使用地址参考：http://beyondcompare.cc/xiazai.html

最新Beyond Compare 4中文版支持Windows、Linux以及Mac OSX系统，拓宽了软件使用范围。对于编程人员来说，你可以用它来对比两份代码的变化；可以用它来找出文本哪里被修改过；用它来对比文件夹之间的差异，登记快照、或者与FTP服务器进行同步。

BeyondCompare 代码对比工具

Beyond Compare 是专业级别的文件对比工具，是一款智能对比文件工具，可以随时随地访问数据，支持多种文件格式对比。

Beyond Compare 下载地址：http://beyondcompare.cc/xiazai.html

Beyond Compare被熟知的地方是文员用它来智能对比文件夹以及文本，然而程序员可以用它来对比代码，这样就不用费老大的力气去一一做对比找不同了，使用它程序员可以享受最优质的对比体验，找出差异，合并文件信息，并生成文件报告。

MindManager 思维导图软件

MindManager 是专业级别的思维导图工具，架构网站结构、栏目规划的好手。除了程序员使用，大客户经理们也经常用到。

MindManager 下载地址：http://mindmanager.cc/xiazai.html

可以快速帮助程序员架构网站结构，进行栏目规划，创造、管理和交流思想。将思想、策略及商务信息转换为行为导图，设置任务进程提醒，更加直观感受整个进度。

Source Insight

上榜理由： SourceInsight能分析你的源代码并在你工作的同时动态维护它自己的符号数据库，并自动为你显示有用的上下文信息。

Source Insight拥有内置的对C/C++，C#和Java等程序的分析，是如今最好用的语言编辑器，还支持自己定义关键字，同时还具备可快速访问源代码和源信息的功能。

Beyond Compare是一套由Scooter Software推出的软件，主要用途是对比两个文件夹或者文件，并将差异以颜色标示。在使用git提交代码时，可以比较两个文件的不同之处，处理冲突，非常实用。

站长工具

这个用处就比较多了，可以说是一个小工具的合集，网站速度测试、移动适配、正则在线生成等功能，如果你是一个配色白痴，那这个简直就是福音，用起来很是方便。

类似的工具还有：http://tools.jb51/table

3xml格式化工具

http://atool.org/xmlformat.php

可以格式化XML的工具，并且提供压缩XML的功能

http://tool.oschina/codeformat/xml

在线代码格式化4正则表达式测试工具

http://download.csdn/detail/glamorbree/1295667#comment

可以用于检验你写的正则表达式是否正确。

Apache Ant ——用于自动化软件构建过程的软件工具，源于2000年初的的Apache Tomcat项目。

SBT ——用于Scala和Java项目的开源构建工具，类似于Java的Maven和Ant。

Atlassian Bamboo ——持续集成和交付工具，它将自动化构建、测试和发布捆绑到单个流程中。

TeamCity ——来自于JetBrains的一个基于Java构建的管理和持续集成服务器。

Grape ——嵌入到Groovy的JAR依赖项管理器。

InfoQ（Information Queue）是一个在线新闻/社区网站，旨在通过促进软件开发领域知识与创新的传播，为软件开发者提供帮助。

（http://infoq/cn/）这是一个神奇的网站，他们的内容比较有技术深度，很多大公司的架构上面都有介绍，很多实战经验非常值得借鉴，他们有一个（infoqchina）每天早晨都会推送一篇文章，非常有深度值得学习每天提升自己。

（https://zhihu）可以说这个社区部满了程序员，或许你对编程学习路线有问题、或许你想要找些资料，这个社区都能毫无保留的满足你。各类各样的程序员问题只有你想不到，没有你找不到。

（http://jikexueyuan）（http://imooc）如果你比较喜欢看视频这种比较有带入式的学习，这两个网站没有错误。海量的教学视频、以及比较全面的学习路线wiki等可以帮助在学习编程路上的你。活到老、学到老。用心去学习吧。感谢用户@蓬朵儿 的提醒，添加一下有关内容：各种世界名校公开课，有三大：edx，coursera，udacity。我国有果壳mooc，中国mooc，中国大学mooc，学堂在线，网易公开课，慕课网……等等。

1，MIT Open Courseware

麻省理工学院的开放课件中的各种问题，包括电气工程和计算机科学2100提供的课程。免费的资源，包括在线课本，考试，多媒体内容，任务和项目的例子 - 所有从过去十年左右的实际MIT课程。

2，Coursera

证书课程一经推出，已经创下100万学生大关，并已延伸到包括0ver来自33所高校200课程。如果你还没有听说过证书课程的，它是斯坦福大学学习的想法出身的巨型启动，基本上你可以通过在世界上最好的学校之一真正的教授讲授网上一个完整的大学课程，而且这些是免费的。

另外还有一点可以通过自身的学习来获取一大进步。

分享给超过5万的程序员朋友下载，这次我把所有干货重新梳理精简，免费给大家 。

究竟有哪些干货呢？先给你们一个目录：

获取方式：

免费获取资料途径：共众平台 “程序员语录"（你懂的）

浏览器开发者工具到底是什么？

其实简单的说，浏览器开发者工具就是给专业的web应用和网站开发人员使用的工具，当然只要你有兴趣想要了解，只要你对这个世界充满这好奇，什么东西你都可以了解。

开发者工具到底有什么用？

它的作用在于，帮助开发人员对网页进行布局，比如HTML+CSS，帮助前端工程师更好的调试脚本（JavaScript、jQuery）之类的，还可以使用工具查看网页加载过程，获取网页请求（这个过程也叫做抓包），抓包是非常有意思的过程，而每一个浏览器厂商生产出来的浏览器都会有自己的杀手锏，也就是功能上的差别，那么这个时候你就找一个最适合自己的浏览器使用就可以，接下来就是介绍我常用的三个浏览器。

chrom浏览器打开－开发人员工具－方式如下：

手动打开开发者工具的方法

当然，也可使用快捷方式，最为简便：打开方式有两种：第一“按F12”，第二：shift+ctrl+i

开发人员工具的界面

下面，为大家介绍下几个功能的使用方法：

Elements

Elements工具像一把手术刀一样“解剖”了当前页面，我们看到的Elements页面一般像这样子：

图中标记为1的红色区块为页面HTML文件，HTML中的每个元素比如<body>、<p>都是一个DOM节点，所有的DOM节点组成了DOM树。我们完全可以把红色区块1当做是DOM树，把HTML元素标签看做DOM节点。

当我们在这里选中某一DOM对象时，网页中相应元素也会被阴影覆盖。我们可以对DOM对象进行修改，修改后结果会在页面实时显示出来。此外，还可以用 Command + f 搜索DOM树中指定的内容，或者是以HTML形式更改页面元素，如下图：

选中DOM对象之后右键即可以看到一些辅助的功能，如图中标记为2的区块所示：

Add Attribute: 在标签中增加新的属性；

Force Element State: 有时候我们为页面元素添加一些动态的样式，比如当鼠标悬停在元素上时的样式，这种动态样式很难调试。我们可以使用Force Element State强制元素状态，便于调试，如下图：

![图4. 强制元素状态][4]Edit as HTML: 以HTML形式更改页面元素；

Copy XPath: 复制XPath；

Delete Node: 删除DOM节点；

Break On: 设置DOM 断点。

图中被标记为3的蓝色区块显示当前标签的路径：从html开始一直到当前位置，我们单击路径中任何一个标签，即可以跳转到相应标签内容中去。

图中标记为4的蓝色区块实时显示当前选中标签的CSS样式、属性等，一共有以下5小部分：

Styles: 显示用户定义的样式，比如请求的default.css中的样式，和通过Javasript生成的样式，还有开发者工具添加的样式；

Computed: 显示开发者工具计算好的元素样式；

Event Listeners: 显示当前HTML DOM节点和其祖先节点的所有JavaScript事件监听器，这里的监听脚本可以来自Chrome的插件。可以点击右边小漏斗形状(filter)选择只显示当前节点的事件监听器。

DOM Breakpoints: 列出所有的DOM 断点；

Properties: 超级全面地列出当前选中内容的属性，不过基本很少用到。

实际应用中我们经常会用到Styles，如下图：

图中标记为1的+号为New style rule，可以为当前标签添加新的选择器，新建立的样式为inspector-stylesheet。此外，也可以直接在原有的样式上增加、修改、禁用样式属性，如图中标记2显示。

在New style rule右边为Toggle Element State，选择后会出现标记3显示的选择框，如果选中:hover后，即可以看到鼠标悬停在页面元素上时的CSS样式了，作用类似于前面的Force Element Satte，更多内容可以看:hover state in Chrome Developer Tools 。

更强大的是，开发者工具以直观的图形展示了盒子模型的margin、border、padding部分，如标记5所示。下面动态图给出了盒子模型的一个示例：

Console

Console可以查看网页运行后提示的消息，错误或者警告以及输出内容等，网页后台可以使用Console.debug("输出内容")；来在Console输出显示，可以做到调试的作用吧，不过一般真正调试不是拿Console。console.debug("Console使用介绍");console是小写形式，不然提示没有Console

Resources

Resources里可以查看web程序跑起来后所加载的一些资源（Resources），包括图片或者其他“值”，以及Cookies

Network

有时候我们的网页加载的很慢，而相同网速下，其他网页加载速度并不慢。这时候就得考虑优化网页，优化前我们必须知道加载速度的瓶颈在哪里，这个时候可以考虑使用Network工具。下图为我的博客首页加载时的Network情况：

请求的每个资源在Network表格中显示为一行，每个资源都有许多列的内容(如红色区块1)，不过默认情况下不是所有列都显示出来。

Name/Path: 资源名称以及URL路径；

Method: HTTP请求方法；

Status/Text: HTTP状态码/文字解释；

Type: 请求资源的MIME类型；

Initiator解释请求是怎么发起的，有四种可能的值：

Parser：请求是由页面的HTML解析时发送的；

Redirect：请求是由页面重定向发送的；

Script：请求是由script脚本处理发送的；

Other：请求是由其他过程发送的，比如页面里的link链接点击，在地址栏输入URL地址。

Size/Content: Size是响应头部和响应体结合起来的大小，Content是请求内容解码后的大小。进一步了解可以看这里Chrome Dev Tools - “Size” vs “Content”；

Time/Latency: Time是从请求开始到接收到最后一个字节的总时长，Latency是从请求开始到接收到第一个字节的时间；

Timeline: 显示网络请求的可视化瀑布流，鼠标悬停在某一个时间线上，可以显示整个请求各部分花费的时间。

以上是默认显示的列，不过我们可以在瀑布流的顶部右键，这样就可以选择显示或者隐藏更多的列，比如Cache-Control, Connection, Cookies, Domain等。

我们可以按照上面任意一项来给资源请求排序，只需要单击相应的名字即可。Timeline排序比较复杂，单击Timeline后，需要选择根据Start Time、Response Time、End Time、Duration、Latency中的一项来排序。

红色区块2中，一共有6个小功能：

Record Network Log: 红色表示此时正在记录资源请求信息；

Clear: 清空所有的资源请求信息；

Filter: 过滤资源请求信息；

Use small resource raws: 每一行显示更少的内容；

Perserve Log: 再次记录请求的信息时不擦出之前的资源信息；

Disable cache: 不允许缓存的话，所有资源均重新加载。

选择Filter后，就会出现如红色区块3所显示的过滤条件，当我们点击某一内容类型(可以是Documents, Stylesheets, Images, Scripts, XHR, Fonts, WebSockets, Other)后，只显示该特定类型的资源。在XHR请求中，可以在一个请求上右键选择“Replay XHR”来重新运行一个XHR请求。

有时候我们需要把Network里面内容传给别人，这时候可以在资源请求行的空白处右键然后选择Save as HAR with Content保存为一个HAR文件。然后可以在一些第三方工具网站，比如这里重现网络请求信息。

选定某一资源后，我们还可以Copy as cURL，也就是复制网络请求作为curl命令的参数，详细内容看 Copying requests as cURL commands

此外，我们还可以查看网络请求的请求头，响应头，已经返回的内容等信息，如下图：

资源的详细内容有以下几个：

HTTP request and response headers

Resource preview: 可行时进行资源预览；

HTTP response: 未处理过的资源内容；

Cookie names and values: HTTP请求以及返回中传输的所有Cookies；

WebSocket messages: 通过WebSocket发送和接收到的信息；

Resource network timing: 图形化显示资源加载过程中各阶段花费的时间

Source

Sources面板几乎是我最常用到的Chrome功能面板，也是在我看来决解一般问题的主要功能面板。通常只要是开发遇到了js报错或者其他代码问题，在审视一遍自己的代码而一无所获之后，我首先就会打开Sources进行js断点调试，而它也几乎能解决我80%的代码问题。Js断点这个功能让人兴奋不已，在没有js断点功能，只能在IE（万恶的IE）中靠alert弹出窗口调试js代码的时代（特别alert一个object根本不会理你），那样的开发环境对于前端程序员来说简直是一场噩梦。本篇文章讲会介绍Sources的具体用法，帮助各位在开发过程中够愉快地调试js代码，而不是因它而发疯。首先打开F12开发工具切换到Sources面板中:

Sources功能面板是资源面板，他主要分为四个部分，四个部分并不是独立的，他们互相关联，互动共同实现一个重要的功能:监控js在执行期的活动。简单来说就是断点啦。

首先我们来看区域1，它的功能有些类似于Resources面板，主要是显示网页加载的脚本文件：例如css， js等资源文件（它不包含cookie，img等静态资源文件）。

区域1的导航条上有三个tab切换选项，他们都存有不同域名和环境下的js和css文件，我们首先来说明Sources（资源）选项的作用:

Sources: 包含该项目的静态资源文件。双击选中文件，该文件内容会在区域2中显示，如果你选中的是js文件，那么你可以在区域2种单击行号进行断点调试，只要js执行到了你所标记的这一行，它会停止向下执行并且等待你的命令:

从上图可以看到js执行到断点处时各个区域的变化，首先是区域3中的Breakpoints记录信息会变高亮，然后是区域4中Scope 选项中列出了断点处私有和公有的变量信息，这样，我可以很直观地知道，此时此刻js的执行状态。同样的，你可以把鼠标放到区域2种的某个变量上，浏览器会弹出一个小框框，框框里面则是你悬浮其上的变量所有信息:

然后，你可以按F10跟着js执行的路径一步一步地走下去，如果你遇到了一个函数包含着另外一个函数，那么你可以按F11进入到个函数中去观察它的代码执行活动。你也可以通过点击区域1底部的各个图标对js代码进行跟踪。不过我建议你使用快捷键，故名思义，因为它比较快捷方便。不过怎么用完全按照个人习惯来吧。下图是各个按钮的作用功能。

　在上图蓝色圆圈中数字，它们分别代表:

　　1、停止断点调试

　　2、不跳入函数中去，继续执行下一行代码（F10）

　　3、跳入函数中去（F11）

　　4、从执行的函数中跳出

　　5、禁用所有的断点，不做任何调试

　　6、程序运行时遇到异常时是否中断的开关

接下来在区域4种切换到Watch Expressions 选项，它的作用是为目前断点添加表达式，使得每次断点往下走一步都会执行你写下的js代码。需要注意的是这个功能必须谨慎使用，因为这可能会导致你写下的监控代码段会不断地被执行。

为了避免你的调试代码重复执行，我们可以在调试时直接在console控制台上一次性地输出当前断点处的信息（推荐这样做）。为了验证我们在console面板中拥有的是当前断点环境，我门可以对比断点执行前后的this值变化。

如果你觉得在断点的时候为了看一个变量必须借用console面板输出的方式来查看会比较麻烦，那么你可以更新最新版的Chrome，它已经为我们解决了这个烦恼。为了方便开发者调试，在这一点上谷歌已经做到了极致，就在前几天更新过Chrome以后，卤煮意外地发现了断点时监控环境变量的另外一种方式，这种方式极为清晰，在断点调试的时候，区域2中会自动显示每个变量的值，每次代码往下走的时候这个值都回时时更新。这让开发者对当前环境变量几乎可以说是一目了然。（此功能有一个小缺陷，那就是无法查看数组或者对象的具体索引和值，不过我相信google会改进它的。）

当你的项目已经线上，出现了一个bug，你修复了之后无法看到它真正在线上的效果，那么你可以在打开线上的项目，直接在浏览器中修改代码然后看到效果。这样的效果往往是最直接的，这种方法也能帮你省去频繁验证发布的麻烦，毕竟身为前端码农的你也一定会听到过后台（通常情况下是后台发布）大哥的抱怨：“XXX，测试通过了没，不要出现了哈，发布一次很麻烦的！”。而在Chrome里面，只需要在区域2种直接修改，你就可以验证你的代码在线上是否可行。卤煮在此处只是指出该功能的用法之一。其他的就凭诸位的聪明才智去想了。

即使在断点时，你也可以编辑代码，按ctrl+S保存之后，你会看到区域2的背景由白色变为浅色，而断点会重新开始执行。

回到区域1，Content script 选项开里面包含着一些第三方插件或者浏览器自身的js代码,经常它是被忽略的，实际上它的作用很少。我们可以更多关注一下Snippets选项。还记得基础篇里面介绍的style吗？在里面我们可以编辑界面的css代码并且即时看到它们的映射效果，同样地，在Sinppets中，我们也 可以编辑（重写）js代码片段。这些片段实际上就相当于你的js文件一样，不同的是本地的js文件在编辑器里面编辑的，而此处，你是在浏览器中编写的。这些代码片段在浏览器刷新的时候既不会消失，也不会执行，除非是你手动执行它。它可以存在你的本地浏览器中，即使关闭浏览器，再次打开时它依然还在那里。它的主要作用可以使得我们编写一些项目的测试代码时提供便捷，你知道，如果你在编辑器上编写这些代码，在发布时你必须为它们添加注释符号或者手动删除它们，而在浏览器上编写就不需要这样繁琐了。

在Snippets选项的空白处右键后选择弹出的new选项，建立一个你自...