如何正确使用浏览器？

回到主页

前言

在web开发这个方面，无论是前端工程师还是后端工程师，都要频繁地接触浏览器。然而很多新入门者缺并没有系统地学过浏览器的使用方法，导致开发效率低下。毫不夸张地说：一个不能了解并熟练使用浏览器的人，是无法精通前端/后端开发的。
本文将介绍对于开发者来说的浏览器的基础知识和正确打开方式。

浏览器选择

浏览器是十分复杂的软件。不同厂家有不同的浏览器，而不同浏览器之间是存在个体差异的。尽管对于普通用户来说，它们可能都能用。但是对于开发者来说它们就有很大不同了。
目前做的最好的几个浏览器，分别是chrome、microsoft edge(new)、firefox和safari，这主要体现在它们对新功能的支持和调试能力上。
例如下表中各浏览器对wasm技术的支持（不在表中的浏览器没有支持计划）：

microsoft edge(new) Chrome83 Firefox78 Safari13.1 Wasmtime0.17 Wasmer0.17 Node.js12.18
JS BigInt to Wasm i64 integration ⏳ ⏳ ✔️ ❌ ✔️ ✔️ ⏳
Bulk memory operations ✔️ ✔️ ✔️ ❌ ⏳ ❌ ✔️
Multi-value ⏳ ⏳ ✔️ ✔️ ✔️ ❌ ⏳
Import & export of mutable globals ✔️ ✔️ ✔️ ✔️ ✔️ ✔️ ✔️
Reference types ⏳ ⏳ ⏳ ⏳ ⏳ ❌ ⏳
Non-trapping float-to-int conversions ✔️ ✔️ ✔️ ❌ ✔️ ✔️ ✔️
Sign-extension operations ✔️ ✔️ ✔️ ❌ ✔️ ✔️ ✔️
Exception handling ❌ ❌ ❌ ❌ ❌ ❌ ❌
Fixed-width SIMD ⏳ ⏳ ⏳ ❌ ⏳ ⏳ ⏳
Tail calls ❌ ❌ ❌ ❌ ❌ ❌ ❌
Threads and atomics ✔️ ✔️ ⏳ ❌ ❌ ⏳ ⏳

信息时代，技术日新月异。作为开发者要紧跟前沿技术，选择的浏览器自然应该尽可能支持最新的技术。
这里推荐：Linux用户使用Firefox，Windows用户chrome、microsoft edge(new)二选一，mac用户safari。
笔者为Windows用户，下方的教学全部以新microsoft edge为浏览器进行。

基本开发者工具使用

打开开发者工具

首先，让我们打开选好的浏览器，然后尝试打开开发者工具。
一般，可以用f12键打开，如果打不开可以试试Fn+f12
如果你的电脑上这两个快捷键都不行，你可以通过浏览器菜单调出它

成功之后，你会看到右边多出一个窗格。接下来我会介绍这个窗格的几个基本功能。

开发者工具介绍1.ELements

要打开elements窗口，首先点击上方的elements tab(图中①处)：

进入这个界面之后，下方的②即为当前页面对应的html源码。
③为我目前选中的html element（为了选中它，我提前点击了它一下）
④为我目前选中的element上的所有css属性的窗口。在这个窗口中，只需要双击某个css属性就可以更改它，双击空白处即可添加新的css属性。而所有属性的左边都有个小“√”号，它代表这个属性是否被计算，把它去掉那么这个属性就不会应用到文档渲染中。大家可以随意改一下里边的值看看效果。我这里以去掉nargin属性左边的勾为例：

之前：
之后：
②中的源码也可以通过双击修改，但是如果是修改css，建议在②中选定元素之后再来④中修改。
因此前端开发人员在调整css的的时候可以利用Elements窗口先在浏览器中调整好，再将结果粘贴进自己的项目中。
然而，在页面源码较复杂的时候，往往难以快速找到我们所想调整的源码块的位置。这时候我们可以用图中的按钮⑤。在点击五之后，再点击左边的网页中的图形，右边窗口会自动选定所点击图形的对应源码。

使用这个技巧可以快速找到自己的目标源码。
而现代除了电脑，还有大量的人通过手机来上网。所以为了开发者能在电脑上直接了解网页再手机端的表现，开发者可以点击⑥按钮，这样网页会自动变为手机端。

开发者工具介绍2.Console

Element功能虽然强大，但是只能提供界面显示方面的帮助。如果要对代码逻辑进行测试，则需要用到Console界面。

console界面的功能很简单：输出前端js的console.log/console.warn/console.error的内容。在我们开发的时候，如果遇到了问题，需要进行debug，就可以用console输出中间变量来观察程序的行为。

开发者工具介绍3.Source

Source顾名思义，源文件。这个窗口会显示目前网站的所有源文件及结构。可以在这个窗口设置断点并且进行debug。但是说实话这个窗口的实用性并不是很高（因为一般项目里有大量的第三方包的代码），所以这个窗口就不多讲了，有兴趣的同学可以自己多试试。

开发者工具介绍4.Network

这是一个很重要的窗口。它在开启后记录所有的网页请求信息。我们在打开这个窗口之后刷新一下，即可看到网页给后端发的所有请求：

请求右边可以看到状态码，返回的类型，大小，耗时等。
在请求的上方有filter，可以筛选请求类型。其中在spa应用中比较重要的是xhr filter

xhr全称xml http request，实际上名字里有xml只是历史原因，大部分类型的api请求，即使返回值不是xml（比如json）也会被分类在这一栏里。
开发中我们经常要确认自己的后端回复是否正常，这样我们就需要获得后端对我们的api请求的详细回复。这些内容都存在这个窗口里！比如我们想获得上图中的login请求的详细信息，点击它即可：

可以看到右边分为好几块，我们将按顺序介绍

  • Headers： 这里是请求方信息和请求、回复的header的集合，分为四块
    • General：

      这里包含了请求的链接，请求的方法（post/get等，亦称为http谓词），服务器端回复的状态码，远程ip地址等。
    • Response Headers：

      服务器端回复里带的http header，里边比较重要的有set-cookie，这个header和身份认证喜喜相关，其它的header对研究爬虫的朋友意义大一些。
    • Request Headers：

      浏览器发送的请求所带的http header，里边的信息往往对研究爬虫的朋友很重要。因为很多网站通过request header里的信息来反爬。
    • Request Payload：

      这个是我们发的请求信息的“body”，一般是我们传递给服务器的参数。这一块并不是所有请求都有，有些请求没有参数，有些请求参数全在url中，有些请求不允许拥有body（比如get）
  • Preview：
    这一块是服务器的返回信息的预览。开发者可以通过这个窗口的信息在一定程度上判断后端是否正常工作。
  • Response：
    服务器的回复信息，Preview窗口的源码。
  • 其它窗口： 用的不多，略。

其它开发者工具

用的不多，同学们有兴趣可以去自行了解，这里略过。

开发者浏览器使用习惯

很多新手在做新项目的时候，会在做身份验证系统的时候各种“莫名其妙”的报错。原因大多数都和cookie有关。因此我建议：开发时尽量打开浏览器匿名模式，这样浏览器在关闭后不会记忆你的cookie。
用匿名模式开发可以避免很多蛋疼问题，能解决的原因比较复杂这里就不写了。总之希望大家牢记于心，养成使用匿名模式的习惯。

本文章使用limfx的vsocde插件快速发布