你有没有遇到过这种情况：刷网页时看到一个特别顺眼的按钮样式，或者一段排版很清爽的文字效果，想照着学一学？又或者孩子上网课，老师让查某个网页元素的位置，你却不知道从哪下手？其实，查看网页代码根本不用下载工具、不用懂编程，浏览器自带功能就能搞定。
电脑上最常用的方法：右键+快捷键
在 Chrome、Edge、Firefox 这些主流浏览器里，打开任意网页（比如百度首页），把鼠标挪到页面任意空白处，点一下右键，菜单里就会出现「检查」或「检查元素」——点它！窗口立刻弹出，右边是代码，左边是页面实时预览，鼠标往左一指，右边对应代码高亮显示，特别直观。
嫌右键麻烦？记住这个组合键：Ctrl + Shift + I（Windows/Linux）或 Cmd + Option + I（Mac），一按就开。再按一次就关，像开关灯一样简单。
手机上也能看，但得换个思路
安卓手机用 Chrome 浏览器，先在地址栏输入 chrome://flags，搜「Developer tools」，开启「Enable Developer Tools」，重启浏览器。然后在要查看的网页地址前加 view-source:，比如原网址是 https://www.baidu.com，就改成 view-source:https://www.baidu.com，回车——整页 HTML 代码就铺开了，滑动就能看。
苹果 iPhone 用户更简单：用 Safari 打开网页，点右下角「分享」图标 → 往上划 → 找「请求桌面网站」先勾上，再点一次刷新；接着长按地址栏，选「选择全部」→ 复制网址 → 粘贴到备忘录，开头手动加上 view-source:，再粘回 Safari 地址栏回车就行。
小技巧：快速定位某段内容
想看页面顶部导航栏的代码？别从头翻。在检查窗口里，按 Ctrl + F（Win）或 Cmd + F（Mac），输入「导航」、「menu」或「header」，代码自动跳转匹配位置。要是看到喜欢的按钮，直接把鼠标移到按钮上，按 Ctrl + Shift + C（Win）或 Cmd + Shift + C（Mac），光标变成十字，点一下按钮，代码立马定位过去。
举个例子，你在淘宝商品页看到一个红色「立即购买」按钮，点开检查后可能看到这样的结构：
<button type="button" class="btn-buy" data-spm="1000983">立即购买</button>后面跟着的 class="btn-buy" 就是控制样式的关键词，复制下来，下次自己做网页就能直接调用类似写法。
家里老人想改自家微信公众号文章的配图尺寸，孩子做信息课作业要截图分析网页结构，甚至你只是单纯好奇「这行字为啥居中」——这些都不是难题。打开浏览器，三秒钟，代码就在眼前。