网站开发中心

1 架构演化

大型网站的关注指标

高可用

高性能

易扩展

可伸缩

安全

大型网站的特点

高并发，大流量

高可用

海量数据

用户分布广泛，网络情况复杂

安全环境恶劣

需求快速变更，发布频繁

渐进式发展

大型网站架构演化发展过程

初始阶段，多使用LAMP来搭建，All In One即所有资源存放在一台服务器上

应用服务和数据服务分离，有独立的数据库服务器

使用缓存改善网站性能（依据是二八定律：80%的业务访问集中在20%的数据上）

这里需要考虑哪些数据适合缓存

缓存可以是本地缓存，也可以是远程分布式缓存

需要考虑使用合理的缓存策略，防止透传

使用应用服务器集群改善网站的并发处理能力

如果能通过增加一台服务器的方式来改善负载压力，就可以以同样的方式持续增加服务器来不断改善系统性能，从而实现系统的可伸缩性

这里需要考虑使用哪些负载均衡的策略

数据库读写分离

可以利用主流数据库提供的主从热备功能，通过配置两台数据库的主从关系，同时业内也有很多优秀的开源中间件如Atlas

缓存中的数据，如果更新过快，那么会持续刷新缓存，从而降低性能

使用反向代理和CDN加速网络响应

CDN和反向代理的基本原理都是缓存

CDN部署在网络提供商的机房，用户在请求网络服务时，可以从距离自己最近的网络提供商机房获取数据

反向代理部署在网站的中心机房，当用户的请求到达中心机房后，首先访问的服务器是反向代理服务器，如果反向代理服务器中缓存着用户请求的资源，那么就将其直接返回给用户

CDN的重点：——《大型网站系统与Java中间件实践》

全局调度

缓存技术

内容分发

带宽优化

使用分布式文件系统和分布式数据库系统

网站常用的数据库拆分手段是业务分库，即将不同业务的数据库部署到不同的物理服务器上

使用NoSQL和搜索引擎

ES

MongoDB

业务拆分，使用分而治之的手段将整个网站业务分成不同的产品线

SOA、服务化

中心化的 gataway方式

消息队列

不同服务访问同一个DB等

这部分十分重要，道理很简单，但是执行起来的效果千差万别。

当下火热的微服务，也是基于这种思想。

技术实现方式也有很多

分布式服务

大型网站架构演化的价值观

网站的价值在于它能为用户提供什么价值，在于网站能做什么，而不在于它是怎么做的。因此对于小型网站来说，最需要做的是位用户提供好的服务来创造价值，得到用户的认可，从而活下去，野蛮生长。

大型网站架构技术的核心价值是随网站所需灵活应对， 它是一个演化的过程

驱动大型网站技术发展的主要力量是网站的业务发展，是业务成就了技术，而不是相反。因此要摒弃为了技术而技术的套路

网站架构设计误区

一味追求大公司的解决方案

为了技术而技术

企图用技术解决所有问题

2 架构模式

分层，这是在横向方向对系统进行切分

分层的挑战在于必须合理规划层次边界和接口

分层包括物理分层和逻辑分层两种

分割，这是在纵向方向对系统进行切分

将不同的功能和服务分割开来，包装秤高内聚低耦合的模块单元

分布式

1） 分布式应用和服务；

2） 分布式静态资源；

3） 分布式数据和存储；

4） 分布式计算；

5） 分布式配置、分布式锁、分布式文件系统。。。

1） 分布式意味着服务调用必须通过网络，需要考虑带宽的影响；

2） 服务器越多，宕机的概率越大

分层和分割的目的在于小模块便于分布式部署

带来的问题：

常用的分布式方案：

集群，即多台服务器部署相同的应用，从而构成一个集群，通过负载均衡设备共同对外提供服务

即使访问量很小的分布式应用和服务，也至少要部署到两台服务器来构成一个小集群，这样可以提高系统的可用性

缓存，即将数据放在距离计算最近的位置以加快处理速度

CDN

反向代理

本地缓存

分布式缓存

异步，业务之间的消息传递不是同步调用，而是将一个业务操作分成多个阶段，每个阶段之间通过共享数据的方法异步进行协作

1） 提高系统可用性；

2） 加快网站响应速度；

3） 消除并发访问高峰

通常需要使用消息队列

带来的好处：

冗余

集群带来的必然结果

安全需求的必然结果

自动化，DevOps思维，尽量减少人工干预

自动化发布

自动化代码管理

自动化测试

自动化安全监测

自动化部署

自动化监控

自动化报警

自动化失效转移、恢复

自动化分配资源

......

安全

3 大型网站核心架构要素

性能

一个性能问题可能会导致网站用户严重流失

衡量性能的指标：响应时间、TPS、系统性能计数器等

可用性

没有网站可以完美的7*24运行

网站高可用结构的前提是必然会出现服务器宕机，儿高可用设计的目标是当服务器宕机时，服务或者应用依然可用

必要的手段是集群，即冗余

伸缩性，即通过不断向集群中加入服务器的手段来环节不断上升的用户并发访问压力和不断增长的数据存储需求

衡量标准：是否可以构建集群；是否可以方便的向集群中添加新的服务器

扩展性，直接关注网站的功能，保证可以快速响应需求变更

衡量标准： 网站增加新的业务产品时，是否对现有业务透明无影响

安全性

衡量标准： 针对现存和潜在的各种攻击和窃密手段，是否可以有效的应对

4 瞬时响应 - 网站的高性能架构

不同视角下的网站性能

用户视角

主要是端到端的感觉

主要通过前段优化的手段来提升用户体验

开发人员视角

主要关注应用程序本身以及相关子系统的性能，包括响应延迟、系统吞吐量、并发处理能力、系统稳定性等

主要优化手段： 使用缓存加速数据读取、使用集群提高吞吐能力、使用异步消息加快请求响应、使用代码优化提升程序性能

运维人员视角

主要关注基础设施性能和资源利用率

主要优化手段： 建设优化骨干网、使用高性价比定制服务器、利用虚拟化技术优化资源利用率

性能测试指标

响应时间，即应用执行一个操作需要的时间，包括从发出请求开始到收到最后响应数据所需要的时间

并发数，即系统能够同时处理的请求的数目，也反映了系统的负载特性

吞吐量，即单位时间内系统处理的请求数量，体现系统的整理处理能力

性能计数器， 描述服务器或者操作系统性能的一些数据指标

性能测试方法

性能测试，以系统设计初期规划的性能指标为预期目标，对系统不断增压，验证系统在资源可接受范围内，是否能达到性能预期

负载测试，对系统不断的增加并发请求，知道系统的某项或者多项性能指标达到安全临界值

压力测试，超过安全负载的情况下，继续对系统增压，直到系统崩溃或者不能再处理任何请求

稳定性测试，在特定硬件、软件、网络情况下，给系统加载一定压力，是系统运行较长一段时间，来观察系统是否稳定

Web前端优化

浏览器访问优化

减少http请求

使用浏览器缓存

启用压缩

CSS放在页面最上面，JavaScript放在页面最下面

减少Cookie传输

CDN加速

反向代理

应用服务器性能优化

分布式缓存

一般会使用消息队列，带来的额外好处是会削平峰值

1）不同的缓存服务器之间进行通信，例如JBoss Cache；

2）不同缓存服务器之间不进行通信，例如Memcached

缓存从本质上来说，就是一个内存hash表

缓存需要缓存那些读写比很高、很少变化的数据，一般来说读写比在2:1以上时，缓存才有意义

应用程序读取数据时，首先到缓存中读取，如果缓存不存在或者已失效，再访问数据库，同时将新的数据放入缓存

缓存也需要注意缓存热点数据

缓存预热，在新启动的缓存系统中，在启动时就加载热点数据，这样启动后就可以直接使用

缓存穿透， 应用持续大量访问不存在的数据，因为这类数据不存在于缓存中，因此会大量访问数据库，从而降低性能

对于分布式缓存来说，目前有两类：

异步操作

使用集群

代码优化

多线程

1） 将对象设计成无状态对象；

2） 使用局部对象；

3） 并发访问资源时使用锁

需要注意线程安全问题，方法：

资源复用

主要是单例和资源池（对象池）

数据结构，选择合适的算法

垃圾回收

合理设置垃圾回收策略

存储性能优化

机械硬盘 vs 固态硬盘

B+树 vs LSM树

RAID vs HDFS

5 万无一失 - 网站的高可用架构

网站可用性度量

网站不可用时间 = 故障修复时间点 - 故障发现时间点

网站年度可用性指标 = （1 - 网站不可用时间/年度总时间）* 100%

一般以几个9来表示，2个9是基本可用，网站年度不可用时间小于88小时；3个9是较高可用，网站年度不可用时间小于9小时；4个9是具有自动恢复能力的高可用，网站年度不可用时间小于53分钟；5个9是极高可用性，网站年度不可用时间小于5分钟

网站高可用架构的设计目标是保证服务器硬件故障时服务依然可用、数据依然保存并能够被访问

网站高可用架构的主要手段：数据和服务的冗余备份以及失效转移，一旦服务器宕机，就将服务切换至其他可用的服务器上。

高可用的应用

无状态应用： 应用服务器不保存业务的上下文信息，而仅根据每次请求提交的数据进行相应的业务逻辑处理，多个服务实例之间完全对等，请求提交到任何一个服务器上，处理的结构都是相同的。

通过负载均衡进行无状态服务的失效转移

负载均衡： 主要使用在业务量和数据量较高的情况下，当单台服务器不足以承担所有的负载压力时，通过负载均衡手段，将流量和数据分摊到一个集群组成的多台服务器上， 以提升整体的负载处理能力

应用服务器集群的Session管理

Session复制

Session绑定

利用Cookie记录Session

Session服务器

高可用的服务

分级管理

核心服务与非核心服务隔离

核心服务优先使用高性能服务器

超时设置

异步调用

必须满足可以使用异步调用方式

服务降级

幂等性设计

服务高可用（高可靠）一直是美团外卖的第一要求，为了提高可用性，做了很多策略，包括并不限于上文提出的各种架构设计方案。

其实造成线上问题的很大一部分原因是由于发版造成的，也体现出了SOP的重要性。

关于降级与依赖隔离，可以考虑采用Hystrix实现自动降级与依赖隔离 。

高可用的数据

数据一旦出现问题，对于网站往往是毁灭性的打击，因此保护网站的数据就是保护企业的命脉。

主要手段：数据备份和失效转移

缓存服务高可用

观点一：缓存服务已经承担了业务中绝大多数的数据读取访问，因此需要同样保证高可用

观点二：缓存服务并不是数据存储服务，出现服务不可用导致数据丢失应从别的手段解决，而不是提高缓存服务本身高可用

缓存服务器集群中单机故障，集群规模较大时，数据丢失比例和数据负载压力影响很小。

CAP原理： 一个提供数据服务的存储系统无法同时满足数据一致性（Consistency）、数据可用性（Availibility）、分区耐受性（Parition Tolerance）这三个条件

数据高可用含义：

副本间数据一致

多个副本可读

同时写入数据副本

1）数据持久性

2）数据可访问性

3）数据一致性

数据一致性分类：

1） 数据强一致；

2） 数据用户一致；

3） 数据最终一致

数据备份

1） 异步热备；

2） 同步热备

冷备的优点是简单和廉价，成本和技术难度较低，缺点是不能保证数据最终一致

热备分为两种：

失效转移

1） 心跳检测（Keepalived、Heartbeat）；

2） 应用程序访问失败报告

失效确认：

访问转移

数据恢复

高可用网站的软件质量保证

网站发布，它的过程和服务器宕机效果箱单，其对系统可用性的影响也 类似

一般采取批量更新的方式进行，不会一次关掉集群中的全部服务器

自动化测试

一般使用Selenium来进行测试

预发布验证

预发布服务器是一种特殊用途的服务器，它和线上的正式服务器唯一的区别是没有配置在负载均衡服务器上，外部用户无法访问

代码控制

主干开发，分支发布

分支开发，主干发布，这是目前使用的主流方式

自动化发布

火车模型：将每个应用的发布过程看做一次火车旅程，火车定点运行，期间有若干站点，每一站都进行例行检查，不通过的项目下车，通过的项目继续坐着火车旅行，直到火车到达终点。

实际中，可能所有项目在途中都下车了，这样火车不得不回到原点，等待�...

前言

写这篇文章是细说网页开发者工具F12 - 前端开发利器的第二篇文章，若觉得不错请关注作者。

F12之Console

就是位于Elemnets右边的，打开后你会发现什么都没有

我们试着进入到友链页面，发现console面板出现了一些警告。这是因为在https域名下使用http的资源引起的警告。

为了更好的示范，我们这里新建一个html文件，代码如下

我们可以看出js的console.log方法可以在console面板输出内容

这里我们尝试书写错误的语法，console面板会报错，显示错误信息以及错误所在的行号

我们还可以直接在console面板直接编写我们的js代码。

在百度首页打开console面板还可以看见百度的招聘信息。

F12之Sources

Sources面板下可以看到网页加载的各种资源，这里我们看到除了本域名下的资源，还加载了百度的统计，还有新浪微博的相册。

通过这个面板我们可以管理网站是否有用到其他网站的资源

未完待续……Continued……

希望这篇文章能给你带来知识和乐趣

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

其实简单的说，浏览器开发者工具就是给专业的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选项，建立一个你自...

网页开发者工具之 Elements

前言

写这篇文章的目的主要是为了帮助前端小白，学习使用浏览器自带的F12网页开发者工具，来快速定位调试分析问题、解决问题。当然这仅是作者的个人学习心得，有不足之处欢迎大家指点。由于篇幅有限，这篇文章仅介绍Elements。若觉得不错请关注作者的后续更新。

如何在F12工具中定位元素

这里拿我的博客作为网页、用Chrome谷歌浏览器作为例子。打开网页，按下键盘上的F12键。点击Elements栏，选择body元素，如下图：

1.左边用半透明蓝色覆盖表示被选区域，仔细看左下角还有个标志显示元素名称和宽高。

2.中部内容就是Elements，即页面元素。看图可以发现我们选择了body元素

3.右侧区域为Style，即css样式,显示的是被选元素对应的css。这样就非常方便我们调试样式。

这里我们假设有个需求，需要右边头像的元素代码和css演示。我们不需要右键查看源代码（早期有些教程会使用这个方法）。

可以使用F12工具的左上角的指针工具

1.鼠标左键单击指针工具，单击后工具会变为蓝色状态

2.移动鼠标到头像上，你会发现自动出现蓝色半透明选框。会显示元素标签和宽高

3.点击确认后，你会发现中部Elements会自动定位到头像代码，右边Style也会自动定位到头像的css样式

4.在中部选择元素后，可以右键复制代码。

5.在左侧的Style面板中，点击css右边的css文件名也可以定位到个css文件中的具体位置

但是有些特殊的样式需要鼠标到达某一特殊位置的时候才会触发，我们再去点指针的时候就会回到原位。（比如博客右侧的小埋，需要鼠标hover才能触发）。

我们可以将鼠标移上去后，按快捷键Ctrl+Shift+C直接使用指针工具。就可以获取这些特殊样式的css代码

还有些时候，我们需要搜索页面中的某些内容。在中部Elements中使用Ctrl+F打开搜索框：

如图我们搜索“一个好”就得到的想要的元素位置。

F12工具中的盒子模型

还有个东西这里提一下，选择任意一个元素，在右边的Style面板下拉倒最下面，都可以看到我们的盒子模型(网页设计中常听的属性名：内容(content)、内边距(padding)、边框(border)、外边距(margin)。这些属性我们可以用日常生活中的常见事物——盒子作一个比喻来理解，所以叫它盒子模式。)

这里可以看出padding的值

这个是margin值

如何在F12工具中直接修改页面

比如我们要修改下面这个标题

直接在Element面板下，双击修改其文本的内容（这里改成余额好多钱，是不是以后都不能相信截图了）

接下来尝试修改其css，我们选择修改其字体颜色和大小

直接在Style面板下修改：颜色改成红色，字体调大至32px。效果如下

我们也可以直接新加css元素，比如加个border(边框)。

移动端开发

若是要调试移动端页面怎么办？

我们只要点击指标工具右边的移动端工具就行，其他的和pc端一样。效果如下：

最后的也是最重要的事

不要在他人电脑上不使用浏览器的记住密码功能！不使用浏览器的记住密码功能！不使用浏览器的记住密码功能！不使用浏览器的记住密码功能！

为什么？这里作者来举个有道云笔记的栗子：

这是作者使用浏览器保密码的有道云笔记的登录页面，你可以看到浏览器默认给你填充好了账号和密码。密码使用···号表示并不可见。

但是，我们打开F12工具:

用指针工具选择密码框。

只要将其input的输入框的type=”password”值改为type=”text”，你的密码就暴露无遗

希望这篇文章能给你带来知识和乐趣，喜欢作者的文章可以点击右上角关注哦()

网站开发之前需要注意哪些？作为开发者的你知道吗？大部分的人在进行网站开发时都会直接将建站给专业的网站开发公司，但殊不知，开发公司即便能力再强，但对于企业文化和产品服务也不了解，针对的人群更加不了解。所以稍加不注意，就会让之前的努力付之东流。那么网站开发之前，我们还需要注意哪些事情呢？

网站开发之前确定建站费用

大部分的企业在进行网站开发之前对于项目都有一个大概的预估，但实际上在真正建站的过程中其实是会超过预算的，因为网站开发的每一个细节都有花销，比如说从刚开始的域名购买到建站费用到后期的安全维护等问题，无一不要话费一定数额的金钱。可能这些单独拿开来看，每个项目花的钱都不多，但是林林总总地堆加在一起，网站开发就很容易超额支付。

站开发之前明确建站需求

这就是小编在开篇给大家说的，网站开发之前一定要明确建站的需求、目的。开发公司只能尽最大的努力将网站开发到极致，但却没有办法了解到企业的文化和产品信息，所以为了让自己可以得到一个满意的网站，我们在建站之前需要提前做好准备，这样想问题才能更加全面。并且在网站开发过程中还要与他们多加交流，将自己建站想法告诉他们，有助于帮助他们建成你想要的网站形式。

网站开发之前了解建站公司实力

业务也是实力的体现，我们在寻找开发公司时，要寻找可靠一点的开发公司，而不要只看价格，尤其要注重售后服务这方面。因为有些公司在你买东西之前将东西夸得天花乱坠，当你付了钱以后就撒手不管了，所以最好把售后这方面的问题问得全面一些，以免出了问题找不到人处理。

以上便是

成都网站开发公司

铭代码科技为大家带来的关于网站开发之前应该做好哪些准备工作的阐述。想要做好网站建设或者是符合企业形象，符合产品特性的网站，其实不难，但前提是我们在网站开发之前的准备工作一定要做到位，这样不仅实施起来也比较顺利，不至于有很多的麻烦出现还有助于开发出更加符合企业要求的网站。

如今，学习如何编程已不再是 IT 专业人员和软件工程师的专职了。随着绝大多数企业都将自己的业务迁移到了网上，如何准确呈现网站访问者想看到的，和如何能够交互网站内容就显出尤为重要。

可见，了解如何编写程序已是一项需要学习的、直接影响到个人职业发展的、非常重要的技能。

可以说，如果您能给线上服务带来价值，那么您就会对任何业务产生积极的、可估量的影响。

在哪儿能学到在线编程？其实，我们有许多不同类型的学习方式，包括：各种预制的学习路径，以及采取单独的个人定制课程。

在此，我为正在寻找编程学习资源的您，列举了 25 个最好的网站，供您参考和选用。

1.Codecademy（https://codecademy/）

Codecademy 致力于提供最好的学习体验，打造最好的编程学习网站。Codecademy 考虑到编程不应该是传统思维所考虑的那种公立学校教育模式，而是应该找到了一种在线课堂的模式，来掌控教育的效果。

Codecademy 所要构建的教育模式是为整个世界的用户提供一种引人入胜的教育体验。

如今，超过 2400 万名学员正在通过使用 Codecademy 所提供的 JavaScript、HTML、CSS、PHP、jQuery、Ruby 和 Python 课程，来学习如何自行编写代码。

而且，该网站拥有超过 300 小时的免费在线内容，为世界各地数以百万的用户提供学习服务。

这些用户可能在编程技能和电脑知识上参差不齐，但是他们总能在此获得自己想要的知识。

2.Udemy（https://udemy/）

该在线学习平台成立于 2010 年，它被作为个人学习和工作技能的一种提高方式。

在网站上，它有一个小部分可选的、带有视频的免费编程课程，当然也有一些整套售卖的课程。

它是一个全球性的在线教育和学习平台，来自各自领域的专家级导师在此提供了超过 45000 种课程库，以帮助学员掌握新的技能，并达到他们的目标。

该网站上有着大量的、售价从免费到 200 美元以上不等的编程课程。同时，网站也为不知道自己喜欢什么、想学什么的零基础访客准备了足够多的免费课程。

学员们不但能够看到那些被系统评为五颗星的课程，他们还能看到其他学员的评论。

3.EdX（https://edx.org/）

这是一个非营利性质的、开源的、优秀的在线学习平台。它成立于 2012 年，由哈佛和麻省理工创办，您可以在此学到最新的前沿理论和技术。

EdX 在全球拥有超过 90 多个合作伙伴，包括一些世界领先的非营利组织、大学和机构。网站会员可以选择来自 60 所院校的课程。

由于 EdX 是由各所大学创立并管理的，因此其课程主要集中在工程、计算机科学、语言、写作、市场营销、生物学等领域。

开放式 EdX 提供着各种免费的课程。不同的技术专家和教育工作者都能够为该平台构建工具、并添加新功能、以及创造出让全球学员都能受益的突破性方案。

4.Coursera（https://coursera.org/）

自 2012 年成立以来，Coursera 已发展成为了一个大型的非营利性的教育科技公司，它提供来自 119 个机构的超过 1000 门课程。

其中一些来自于 Vanderbilt 大学、多伦多大学、斯坦福大学，和华盛顿大学的入门级免费课程。当然，某些更高级的课程还是要收费的。

课程语言包括英语、西班牙语和法语，而课程下方一般也配有英文、西班牙语或中文字幕。

课程类型包括：商业、科学和计算机科学等。可以说，每一门视频讲座都是由世界顶尖的教育机构、社区论坛、和同行评审作品所提供。

学员在完成了他们的课程之后，会获得一份课程电子证书。一般而言，课程的周期从 4 到 6 周不等，售价通常为 29 美元到 99 美元，它们不仅有在线模式，还提供大家远程访问的主机。

5.Simpliv（https://simpliv/）

Simpliv 是基于 CA 的在线学习平台。它旨在将教育延伸到世界的每个角落，并帮助那些想通过学习改变现状的人们。该平台的课程品类非常广阔：从心理学到管理学，从灵气学到财务管理。

学员可以自行选择他们喜欢的编程语言，如 C++、Java、JavaScript、Rust、Ruby、PHP、SQL、Swift、TypeScript 和 Crystal 等。

同时，他们可以通过自我挑战来提高自己的编程技能。通过使用自己的浏览器和各种测试用例，他们能够自行检查学习的进度。

Simpliv 通常使用创新、新建和优化的学习方法，来帮助学员“沉淀”他们所学到的知识。

6.FreeCodeCamp（https://freecodecamp/）

Free Code Camp 的主要宗旨是向非营利组织传授编程技能。目前，该组织已解决了 3000 万条编程难题，并为开发工作捐赠了超过 140 万美元。

除此之外，超过 4000 多名学员已通过 Free Code Camp 所提供的课程学习找到了工作。

该平台的课程种类包括：HTML5、CSS3 和 JavaScript 等。通过社区聊天室，学员们能够得到实时的帮助，同时也能够见到同城的其他开发者。

学员们不但可以按照自己的节奏进行学习，还能够按需使用电脑或手机进行在线学习。

在学习过程中，每个学员需要将自己的身份与自己的实际的应用套件相组合。

课程的传授方式包括：教学互动、集中式作业和教程发布等。另外，它对于初学者来说是免费的。

7.GitHub（https://github/）

程序员们经常将 GitHub 作为一个速查的参考点。在 Git 的托管存储库中有着 500 多本免费的编程书籍，覆盖 80 多种不同的编程语言。另外，网站合作者们也持续保持着资源的更新与准确。

8.Odin 项目（https://theodinproject/）

这是维京代码学校（知名的在线编程训练营）的免费版本。根据 Odin 项目设定的学习路径，学员能够获取学习 Web 开发和编程的正确方式。

学员们在该项目中建立自己的档案信息，这将有助于后续的学习进程、以及职业道路。

在 Odin 项目中学员也能够方便地找到志同道合的学友。在此，学员们通过学习诸如：Web 开发入门、网站开发 101、Ruby 编程、HTML5、Ruby 规则、CSS3、jQuery 和 JavaScript，最终将成为一名 Web 开发人员。

Odin 项目提供的课程类型包括：视频、教程、博客、以及专题课程。它们通过各种课程来引导学员构建自己的不同项目。

9.Khan（可汗）学院（https://khanacademy.org/）

该网站提供了各种形式的教育实践活动、个性化的学习仪表板（进度）显示、和教学视频。

来自世界各地数以百万计的学员，能够按照自己的节奏去学习编程要领。该平台的资源可被翻译成 36 多种语言。另外，网页编程类学员可以使用其扩展的编程教育课程和资源网页。

该机构的使命是提供一个世界级的、向任何地方、对任何人开放的免费教育平台。

学员们既可以浏览全部，也可以通过诸如视频、文章、程序和练习等分类来查找自己喜欢的资源。

另外，学院既有一些刚入行的初学者课程，也有适合那些希望提高编程技能的专业人士课程。

10.MIT（麻省理工）开放式课程（https://ocw.mit.edu/index.htm）

麻省理工开放式课程的特点是任何人无需申请，只要有一台电脑，就可以访问其课程。它们根据不同的主题设立了在线图书馆，访客不需要任何帐户便可登录。

他们可以浏览所有可用的课程，甚至可以对查找结果进行评估、根据是否为讲义、视频、音频、以及在线教科书等特征进行筛选。

同时，麻省理工开放式课程也能帮助各位教师改善他们的课程，让学员寻找获取进阶的增值资源。

总的说来，学员完全可以免费地、自行选择想要学习的编程课程，而且能够完全按照自己的节奏去完成。

11.UdaCity（https://udacity/）

UdaCity 的宗旨是向全世界提供经济实惠、方便、且高效的技能教育。这些教学内容是如今行业领先的公司（包括 Facebook、Google、IBM 和 AT&T）所亟需和认可的，也是传统学校鲜少涉及到的。

由导师、评审人员和教练所组成的团队，会对学员的水平进行把关，以确保他们胜任其目标岗位。

学员们可以免费学习 JavaScript 的基础课程，而对于一些深入的课程则需付费。

12.Code Avengers（https://codeavengers/）

该平台通过 1000 多项热门的编程问题、测验、和视频，为学员提供专业的、步进式的指导。

学员从学习如何构建简单的网站和应用开始，迅速进阶到真正的、能向潜在雇主展示的应用场景之中。

当前，该平台拥有来自 190 多个国家的超过一百万名学员，他们或实现着自己的目标、或尝试着改变世界、或开办自己的公司。

因此，普通学员可以免费使用其 7 天、每门 5 个课时的受限教程；而其付费的无限制套餐则包括所有的课程、测验、项目、和应用渠道。

13.David Walsh 博客（https://davidwalsh.name/）

David Walsh 是一名 33 岁的 Web 开发人员和软件工程师。他既是 Mozilla 的高级软件工程师，又是自己博客的技术作者，还为世界各地的其他会议提供演讲服务。

他擅长于 MooTools JavaScript 框架，并能创建 MooTools 插件；同时他也是 Script & Style、以及 Wynq Web 实验室的创始人。

他时常撰写 JavaScript、AJAX、PHP、WordPress、CSS、以及 HTML5 等方面的博文。访客可以通过搜索其博文的关键字标签，来获取并学习相关文章。

14.Tuts+（https://tutsplus/）

该平台以免费和付费两种形式提供由专业人士打造的，超过 570 个视频课程。同时，Tuts+ 也出版电子书，并支持用户的搜索功能。

该网站所拥有的课程类型不仅限于计算机方面，它通过成千上万种免费教程，向学员传授开发 Web 应用、和移动设备等方面的知识。

Tuts+ 将初学者教程分为三大类：

通过 Web 开发，来教授开发语言、框架、和所有相关工具。通过提供素材，让学员成为WordPress插件和主题方面的专家。传授能够用于各种平台（包括 Android 和 iOS）的移动开发技能。

15.SitePoint（https://sitepoint/）

SitePoint 是一个 Web 开发者的分享中心，同时它也能给设计师、开发者、创业者、产品经理和程序员提供帮助。

访客可以简单地在其搜索框中输入关键词，以查找并浏览相关文章。而各种文章既可以按照类别排序，也可以按照作者排序。

当然，访客还可以使用其菜单栏，搜索自己想要的编程语言，其中包括：HTML、CSS、JavaScript、PHP、Ruby、移动应用设计、WordPress、和 Java 等。

16.HTML5 Rocks（https://html5rocks/en/）

这个网站创办于 2010 年，涵括了有关 HTML5 的所有更新资源与教程。由于它是开源的，因此开发者可以任意使用其 HTML5 的代码。

由于其课程相对专业，因此不太适合入门级开发者。访客可以通过站内搜索来浏览所有教程。

许多教程的作者都来自于不同领域、使用不同语言的 Web 开发和编程高手。

17.Hack.pledge()（https://hackpledge.org/）

该网站是一个开发者的互助社区，导师和学员们可以在此持续交换信息，从而将那些可能被“卡壳”的时间，转换为提升写出更好代码的速度。

为了降低运营成本，它通过 Pluralsight（在线教育网站）来将导师与学员自动关联，以促进学习成果的转化。同时只要导师在线，学员们就能够按需免费地得到他们的指导。

18.aGupieWare（http://blog.agupieware/2014/05/online-learning-bachelors-level.html）

这实际是一个被用来调查全美顶级机构的独立应用开发平台。麻省理工学院、伯克利、卡耐基-梅隆大学、和哥伦比亚大学在此提供了各种免费的课程。

该平台上有 15 种课程，分别是：3 门介绍课、7 门核心课、以及 5 门选修课。虽然该网站并不提供学分，但它的确是初学计算机程序设计与编程的好地方。

其在线学习课程根据学员们的学习轨迹进行划分，包括 Python、计算机科学、敏捷开发、黑客学、安全测试、和 Linux。此外，其博客里也有许多有关最新电脑技术的文章。

19.Crunchzilla（http://crunchzilla/）

该平台由数据专家、代码专家、代码怪物、和游戏专家四个板块组成，它是一个适合于各个年龄阶段学习者进行编程实验、测试和研究的网站。

一般而言，代码怪物提供最简单的教程，适合于 9-14 岁的青年学习。代码专家的目标人群是 13 岁及以上，提供了更难更深的议题，以及更多的解释。

游戏专家是专为已经有一些编程经验的青少年和成年人准备的，它通过步进式教程教您如何编写视频游戏。

上述三个板块通过实时的课程方式，以动手为主、解释为辅。数据专家板块则专注于数据统计，能够提供统计的相关问题，并为新项目提供数据。

20.Dash General Assembly（https://dash.generalassemb.ly/）

这是一个免费且有趣的在线课程网站。用户可以在浏览器上简单地实践它所涉及到的 Web 开发基础知识和项目。

例如：

用户既可以学到 HTML5 的正确编程方式，又能学习如何构建美观现代的网站、以及如何设计页面导航和内容布局。CSS3 资源将帮助用户创建全功能的登陆页面，包括：时髦的导航栏、多栏目布局、和移动响应式设计等。用户可以通过学习 JavaScript，来创建一个管理用户事件的动态界面、以及添加用户交互的动画效果等。

Dash GeneralAssembly 面向未来地为学员免费提供了职场热门需求的编程技能和培训。