CyberSecurity 1 : Chrome Tools

Posted recently Updated recently

By boommanpro

83~107 min read

Chrome Tools

操作方式 operation method

操作	Windows / Linux 系统	Mac 系统
打开开发者(developer)工具（默认上次使用的面板）	F12 或 Ctrl + Shift + I	Command + Option + I
打开开发者工具并直接定位到控制台面板	Ctrl + Shift + J	Command + Option + J
打开开发者工具并进入审查(review)元素模式(mode)	Ctrl + Shift + C	Command + Shift + C

功能介绍

功能面板	核心功能	具体作用及实例
元素（Elements）	实时编辑 DOM 与 CSS、排查(invistigation)样式问题	1. 双击 HTML 标签可修改文本或标签结构，比如修改按钮文字并即时查看显示效果； 2. 右侧 CSS 面板可勾选 / 取消样式规则，快速定位(location、position)浮动(floating)异常、边距(margin)冲突(conflict)等布局问题； 3. 可添加`will-change: transform`等属性，测试渲染性能优化效果。
控制台（Console）	执行 JS 代码、日志查看、错误跟踪(tracking)	1. 输入`document.getElementById('test')`快速获取页面元素，验证 DOM 操作逻辑； 2. 显示`console.log`输出的日志、代码警告(warning)和错误，点击错误信息可跳转(jump)至出错代码行； 3. 用`console.warn`和`console.error`区分日志级别，辅助(assist)调试多模块代码。
源代码（Sources）	JS 断点(breakpoint)调试、本地代码替换、代码编辑	1. 点击行号设置断点，按 F11 单步进入函数，观察变量在执行过程中的变化； 2. 通过 “本地替换” 功能，用本地修改后的 JS 文件替换线上文件，调试生产环境 Bug； 3. 查看调用堆栈，理清函数嵌套调用关系，定位递归逻辑错误。
网络（Network）	监控网络请求、分析请求性能、模拟网络环境	1. 刷新页面捕获所有资源请求，查看 API 接口的 404、500 等状态码，排查接口调用问题； 2. 筛选图片类请求，分析过大图片资源，针对性优化压缩比例； 3. 模拟 3G 网络，测试网页在低速环境下的加载延迟情况。
性能（Performance）	录制（record）性能数据、分析卡顿(caton)瓶颈(bottleneck)、监控资源耗时	1. 录制页面滚动（scroll）、动画播放等操作，通过火焰图识别 CPU 占用过高的函数； 2. 查看 HTML 解析、脚本执行、页面渲染的耗时分布，优化长任务代码； 3. 检测动画掉帧问题，针对性重构复杂动画逻辑。
内存（Memory）	拍摄内存快照、检测内存泄漏	1. 多次拍摄单页应用切换页面后的内存快照，对比差异找出未释放的对象； 2. 跟踪内存分配情况，定位循环引用导致的内存持续增长问题； 3. 优化频繁创建的临时对象，减少内存占用。
应用（Application）	管理本地存储、查看缓存资源	1. 查看 Local Storage 和 Session Storage 中的键值对，调试用户登录状态存储逻辑； 2. 编辑或清除 Cookie，测试网站记住登录状态的功能是否正常； 3. 查看 IndexedDB 中的数据，排查网页离线存储相关的功能异常。
安全（Security）	检测网页安全状态、验证安全策略	1. 查看网页 HTTPS 证书是否有效，排查证书过期导致的访问异常； 2. 检查内容安全策略（CSP）配置，防范 XSS 攻击相关的配置漏洞； 3. 提示混合内容风险，比如页面中 HTTP 资源导致的安全警告。
渲染（Rendering）	分析渲染性能、模拟视觉效果	1. 开启 “重绘区域” 高亮，查看页面滚动时频繁重绘的区域，优化 CSS 减少无效渲染； 2. 模拟不同屏幕刷新率，测试动画在低刷新率设备上的流畅度； 3. 开启暗模式模拟，调试网页在深色主题下的样式适配问题。
审计（Lighthouse）	全方位性能审计、生成优化建议	1. 对页面的性能、可访问性、SEO、PWA 等维度进行评分； 2. 生成具体优化建议，比如提示启用文本压缩、优化图片格式等； 3. 对比优化前后的评分，验证优化措施的有效性

Technical meal addition：Why Chrome Always Update ?

Chrome 142 has added a local system access protection mechanism. When an external website attempts to access devices such as routers and printers corresponding to local IP segments like 127.0.0.0/8, the browser will pop up a confirmation prompt, and access is only allowed after user authorization. This is to defend against the infringement of local devices by cross-site request forgery attacks.
Strict extension management: Chrome restricts users to installing extensions only from the official store, and version 142 will automatically disable extensions that violate the App Store policies, such as plugins with metadata manipulation or potential vulnerabilities. Users can also manually manage extension permissions, for example, revoking the "read browsing history" permission of ad-blocking tools to prevent such tools from leaking personal data.
Safe Browsing and HTTPS Enhancement: Chrome's safe browsing feature can detect malicious websites and dangerous downloaded files in real-time. When users attempt to access phishing websites, the browser will pop up a prominent warning page to block access. At the same time, it gives priority to supporting the HTTPS protocol and by default blocks the loading of HTTP resources on HTTPS pages, avoiding mixed content attacks and reducing the risk of data being eavesdropped on or tampered with during transmission. In addition, enabling the "Use secure DNS resolver" option can effectively prevent DNS hijacking attacks.
Process isolation and sandboxing mechanism: This is one of Chrome's core security strategies. It allocates an independent rendering process to each tab, and all web content runs in a sandboxed environment. For example, if a tab is implanted with malicious code, the code will be restricted to the current process and sandbox, neither affecting other tabs nor being able to break through the restrictions to access the user's local file system. Chrome 142 also introduces the "origin isolation" model, which isolates each "origin" composed of a protocol, domain name, and port into an independent process, further enhancing security.

编程分享