360浏览器调试工具

360浏览器的浏览调试工具，藏在右键菜单的器调“检查”里，按F12也能呼出来。试工很多人以为它只是浏览给程序员用的，其实不然——你改个网页文字、器调扒个图片、试工看网站用了什么技术，浏览它都能干。器调

打开后第一眼是试工Elements面板，左边是浏览HTML结构，右边是器调CSS样式。你点左边任意一个标签，试工右边就显示对应样式。浏览想改页面文字？器调双击左边那行字，直接输入新内容，试工页面上就变了。这功能我常用来截图时去掉水印文字，或者临时改个文案给同事看效果，不用等设计改图。

但真正有意思的是Network面板。刷新一次页面，它记录所有请求——图片、脚本、接口数据，每条都有加载时间。有次我嫌一个网站太慢，打开Network一看，发现有个3MB的图片，压缩后直接提速两倍。这面板还能看接口返回的JSON数据，前端调试接口时，不用翻后端日志，这里一目了然。

Console面板则是另一个世界。它像个命令行，能直接执行JavaScript。比如你想知道页面某个按钮绑定了什么事件，在Console里输入getEventListeners(document.querySelector('button'))，它全列出来。更实用的是，你可以在Console里改全局变量——有些网站有调试开关，比如隐藏的VIP功能，虽然不推荐破解，但你能用它理解网页逻辑。

Sources面板是给写代码的人准备的，但非技术者也能用。它像文件管理器，能看到网站所有静态资源——JS、CSS、图片。我偶尔需要下载某个网站的SVG图标，找不到下载按钮，就在Sources里搜文件名，直接保存。这比用抓包工具简单得多。

还有个冷门功能：Device Toolbar（设备工具栏）。点一下面板左上角的手机图标，页面就变成手机视口，能模拟iPhone、Android各种屏幕尺寸。做运营的人经常要检查H5页面在不同手机上的显示效果，不用真拿手机一个个试，这里直接切换。

360的调试工具和Chrome的几乎一样，因为内核相同。但360有个优势：内置了“审查元素”的快捷按钮，鼠标悬停在页面上就能高亮对应代码，对新手更友好。用久了你会发现，它不只是调试工具，更像一个手术刀——能解剖任何网页的构造。

最后说个细节。很多人不知道，调试工具里的颜色选择器能直接吸取屏幕任意位置的颜色，不止是网页内。做设计时，看到别的网站某个配色好看，不用截图再去PS里吸，直接打开工具，点颜色方块，鼠标移出浏览器窗口也能取色。

这工具没多高深，但值得花半小时玩玩。改坏页面？刷新一下就恢复原样，不会留任何痕迹。玩熟之后，你会对网页有一种“拆解”的视角——看任何网站，第一反应是F12。