页面内存占用，当然越少越好。对于网页来说，对于静态的页面，只要减少传输不必要的数据，那么通常就没必要分析内存占用；如果你的页面上有大量的JavaScript，并且发现页面占用的内存特别多，或者用了一段时间后性能很差，等现象的话，那么你可能需要尝试分析一下页面的内存占用情况。 大多数情况下，一个页面从打开到最后关闭，时间不会很久，因此即使有轻微的内存泄漏，也不会是问题；如果希望用户打开这个页面很久不...

十几年前，可能很多的网页都是静态的HTML页面，在加上少部分的JavaScript代码，关于页面的性能，大家可能更关注的是如何节省网络传输的带宽，让内容可以更快地显示给用户。 而现在，开发者可能更倾向于借助大量的JS代码来生成页面，比如 乐码范 的整个网站的大部分页面，及每个页面的大部分内容，都是JavaScript生成的，那么这么多的JavaScript，就很有可能由于方法不对、程序bug等原因...

何时使用“网络”面板 通常，当您需要确保资源按预期下载或上传时，请使用“网络”面板。“网络”面板最常见的用例是： 确保资源实际上正在上传或下载。 检查单个资源的属性，如其 HTTP 标头、内容、大小等。 如果您正在寻找提高页面加载性能的方法，请不要从“网络”面板开始。有许多类型的负载性能问题与网络活动无关。从"审核"面板开始，因为它为您提供了有关如何改进页面的针对性建议。请参阅优化网站速度。 打开...

HTML和CSS一般都是声明型的代码，所以一般来说，代码修改和调试都比较容易。JavaScript是一种动态编写的代码，有很多的判断、循环等逻辑，因此，相比HTML和CSS来说，就更需要调试的功能。 Chrome提供的JS的调试功能十分的强大，又很简单易用。今天我们拿“全球最大的同性交友网站” Github 来举例子分析。 先打开Github的首页，然后按 打开开发者工具，看到如下： 我们看到代码...

用过Python或其它脚本语言都知道，一个简单的命令行控制台是多么的方便：敲一行或几行代码，就立刻能看到代码的结果，根本不需要临时创建个新文件。 JavaScript其实也有的，就是浏览器开发者工具里的 Console 面板。 先小试牛刀一下： 你也可以按F12后，切换到 Console 面板，复制下面的两段代码，亲手试一下。 程序1： 程序2： 还有更厉害的试验，拷贝下面代码到Console...

现在我们切换到 (元素)面板，可以检查并实时编辑页面中的HTML和CSS。 对于一个开发者来说，日常最主要用的功能主要有两个： 查看/修改HTML元素。 从而不需要任何真实的代码改动，就能看到实际的运行结果。可以用来快速调试、测试等等。 查看/修改CSS样式。 可以快速地试验某些样式的改动，然后再复制到真实的代码中去。 查看/修改HTML元素 请看下面这个例子。 上图中要注意几点： 图片中 红...

一个受不同人都欢迎的网页，不仅仅要考虑各种大小的屏幕，比如14寸、17寸、23寸及更大的桌面显示器，也要考虑各种移动设备如手机、平板电脑的屏幕。也就是说，要做一个响应式的页面，要能在不同大小的窗口上都要适配没问题才行。 手动调整浏览器的窗口测试太麻烦，利用Chrome自带的显示模式切换功能就方便多了。点下图中的手机/平板图标来打开/关闭这个功能（开启时是蓝色，关闭时是灰色）： 可以看到，Chrom...

Chrome开发者工具(Chrome DevTools)是一项Web前端开发的利器，简单的有分析DOM元素、分析网络请求，复杂的如debug页面代码，分析页面性能等等，是一个前端开发必用的工具。 由于官方的 链接 是英文的，并且也打不开，所以这个教程将对这个工具做一下简单的使用说明。 本教程从实用角度出发，主要介绍的是程序员们经常用到的功能。开发者工具非常强大，细节功能也非常多，由于不想做成一个工...