前端对于不同浏览器内核的调试方法（干货）

一、前言

浏览器内核是浏览器的核心，负责取得网页的内容、整理信息，并将最终结果输出到显示器上。浏览器的内核分为：渲染引擎、JS引擎两个部分。内核的不同对于网页的语法解析不同，渲染效果也不尽相同。所以在不同的浏览器中，他们的内核是不同的，同一套代码在不同的浏览器渲染出来的效果也会存在差异。

以下是常见的浏览器内核

• IE浏览器：trident内核（2022年6月15日宣布停止维护）；
• FireFox浏览器：geoko内核（是以C++编写的渲染引擎）；
• Safari浏览器：webkit内核；
• Chrome浏览器：Blink/webkit内核；
• Opera浏览器：以前是presto内核，现在改为Blink内核；
• 360浏览器：兼容模式（trident内核）、极速模式（Blink内核）；

所以，在我们日常开发中，有些项目会要求需要兼容各个浏览器的内核。对于一名前端开发来说，除了需要了解各个内核之间的区别外，对于页面的调式也尤为重要。很多人可能会选择下载各种浏览器进行调试，这明显是一个不明智、不专业的选择，所以在这里分享一个非常好用的方法。

二、调试方法（以谷歌浏览器为例）

1. 打开开发者工具 -> 选择network ->选择 More Network conditions选项

2. 找到 “用户代理”（User agent）部分。取消选中 “使用浏览器默认”（Use browser default）复选框

3. 点击 “用户代理”（User agent）下拉菜单，并选择您想要模拟的浏览器环境。例如，您可以选择 “Microsoft Edge”、“Google Chrome”、“Mozilla Firefox” 或 “Safari” 等（如果没有合适的，也可以直接在输入框中输入一个自定义的用户代理字符串）

4. 验证内核是否代理成功，在 “控制台”（Console）面板中，输入以下 JavaScript 代码

console.log(navigator.userAgent)

5. 输出的用户代理字符串和您设置的用户代理一致，即代理浏览器内核成功，可以进行调试。