3个方法手把手教你看源码，小白也能一步到位
别看源码听起来高深，其实浏览器早就给咱们准备了”后门”，操作起来比你想象的简单多了。我去年帮一个做美食博客的朋友调整网页排版，她当时连”开发者工具“是什么都不知道，结果跟着我教的第一个方法，自己就找到了修改字体大小的代码位置。下面这3个方法，从电脑到手机都能用，总有一个适合你。
方法一：右键”查看网页源代码”，最直接的入门法
这个方法简直是为纯小白量身定做的，连键盘都不用多按。你随便打开一个网页，比如你常逛的新闻网站，在页面空白处点一下鼠标右键，会弹出一个菜单，里面肯定有”查看网页源代码”（不同浏览器 wording 可能有点差别，比如Chrome叫”查看页面源代码”，Edge叫”查看源代码”，但意思都一样）。点一下，浏览器会新开一个标签页，里面全是密密麻麻的英文和符号，这就是网页的HTML源码了。
不过直接看源码可能有点懵，我教你个小技巧：按键盘上的”Ctrl+F”（Mac用户按”Command+F”），会弹出搜索框，你可以搜关键词快速定位。比如你想找网页的标题，就搜.jpg或.png，后面带src=的就是图片链接，复制下来粘贴到地址栏就能直接打开。我之前帮朋友找她博客里一张被防盗链的风景图，就是用这个方法搜”.jpg”找到的原始链接，比她找技术人员问快多了。
方法二：按F12召唤”开发者工具“，看源码还能实时互动
如果你想更进阶一点，不光看源码，还想知道某个按钮、某段文字在源码里对应哪部分，那一定要试试”开发者工具”。这个功能藏在F12键里——你随便打开一个网页，按一下键盘上的F12，浏览器右侧或底部会弹出一个面板，这就是开发者工具了。点面板顶部的”Elements”（元素）选项卡，你会看到左边是网页预览，右边就是对应的源码，而且鼠标移到源码上，左边网页对应的部分会高亮，简直像给源码装了”导航仪”。
我上周帮同事改她的个人简历网页，她想把”联系方式”那行字改成红色，但不知道代码在哪儿。我让她按F12打开开发者工具，然后用左上角那个像鼠标箭头的”选择元素”按钮（长得像个方框套着箭头），点一下网页上的”联系方式”文字，右边源码里立刻就跳转到对应的代码行了，再找到color:后面的颜色代码，改成#ff0000（红色），左边预览区马上就变了，比猜代码位置高效10倍。这个方法特别适合想改点简单样式又不想麻烦程序员的人，不过记得改完只是预览，想保存得真正改网页文件哦。
方法三：手机也能看！在线工具帮你轻松搞定
如果你平时习惯用手机逛网页，又想临时看个源码，总不能随身带电脑吧？这时候在线源码查看工具就派上用场了。我常用的是”网页源码查看器”（直接搜这个名字就能找到，注意选带绿色对勾的正规网站），打开后把你想查的网页链接复制进去，点”查看源码”，手机屏幕上就会显示格式化后的源码，比直接在手机浏览器里看清晰多了。
不过手机看源码有个小缺点：屏幕小，代码容易看串。我的解决办法是把字体调大（工具一般都有字体大小设置），然后重点搜关键词，比如找视频链接就搜，找表单就搜。我之前在地铁上帮朋友看她的公众号文章排版问题，就是用手机在线工具搜”class="rich_media_content"“（公众号文章内容的固定代码），很快就找到了她不小心多打的空行代码，当场就告诉她怎么改了。
看懂源码能解决哪些实际问题？这5个场景超实用
可能你会说：”我又不做网站，看源码有啥用？”其实用处可大了！我这两年帮身边朋友解决过不少”小麻烦”，全靠看源码这招。比如上个月，我表妹想下载一个教育网站的课件PPT，结果网站设置了”禁止右键”，她急得不行。我教她用F12开发者工具，在”Elements”里搜”.ppt”，30秒就找到了下载链接，比她到处求资源快多了。下面这些场景，你说不定哪天就会遇到，提前学会不吃亏。
找隐藏资源：图片、视频、文档一键解锁
很多网站为了防盗链，会禁止右键保存图片或下载文件，但源码里藏不住。我之前帮一个做设计的朋友找灵感，她看到一个国外网站的banner图特别好看，右键保存显示”功能禁用”。我让她用方法一打开源码，按”Ctrl+F”搜”img src=“（图片标签），很快就找到一个以”.png” 的长链接，复制到新标签页打开，右键就能保存高清图了。视频也是同理，搜<video src="或<source src="，找到的链接直接就能播放或下载。
这里要提醒一句：下载资源前记得看网站的版权声明，个人学习可以，商用可千万别乱用，免得侵权。之前有个朋友没注意，用源码下的图片做了公众号封面，结果收到版权方的提醒，删文不说还赔了小钱，得不偿失。
检查网页问题：自己就能当”半个程序员”
有时候网页会出小毛病，比如文字错位、图片不显示，找技术人员修又要等，其实自己看源码说不定能搞定。我去年帮一个开网店的朋友排查问题，她的商品详情页总有一段文字显示不全，技术说要第二天才能看。我让她按F12打开开发者工具，选中那段文字，发现源码里有个overflow: hidden（溢出隐藏）的样式，把它改成overflow: visible（溢出可见），文字立刻就全显示了。后来技术来了都说：”你这比我还快！”
还有种常见情况：网页加载慢。你可以在开发者工具的”Network”（网络）选项卡里看加载资源的时间，哪个文件后面显示的时间长（比如红色的”Failed”或黄色的”Warning”），就是拖慢速度的”罪魁祸首”。虽然你改不了服务器，但至少能告诉技术人员具体问题在哪儿，省得他们瞎猜。
学习别人的设计：偷偷”抄作业”不丢人
如果你想做自己的博客或小网站，不知道怎么设计排版，看优秀网站的源码就是免费的学习机会。比如我刚开始做个人博客时，想做一个悬停时会变色的按钮，不知道代码怎么写。我就打开我喜欢的一个博主的网站，按F12找到按钮对应的源码，看到里面有hover样式（鼠标悬停效果），把那段代码复制下来，稍微改改颜色和尺寸，我的按钮就有效果了。
“抄作业”不是让你直接复制粘贴，而是学思路。比如别人怎么组织HTML结构，怎么用CSS写响应式布局（就是手机电脑都能适配的布局），这些在源码里都能看明白。MDN Web Docs（Mozilla的官方开发者文档，链接：https://developer.mozilla.org/zh-CN/docs/Web/HTML，记得加nofollow）里就说过：”查看优秀网站的源码是前端学习的有效方法之一”，连权威网站都推荐，你还有啥不好意思的？
为了让你更清楚不同方法的适用场景，我整理了一个表格，你可以对着选：
| 方法 | 优点 | 缺点 | 最适合场景 |
|---|---|---|---|
| 右键查看源码 | 操作最简单，无需学习 | 代码杂乱，不易定位 | 快速找链接、标题 |
| F12开发者工具 | 可互动，能定位元素 | 面板功能多，新手可能懵 | 改样式、查错位问题 |
| 手机在线工具 | 随时随地可用，适合手机党 | 屏幕小，操作不如电脑方便 | 临时查看，简单搜索 |
你平时有没有遇到过想保存网页图片却被限制的情况？或者好奇某个网页的标题是怎么设置的？现在就打开一个你常用的网页，试试右键”查看源码”，搜搜
你有没有试过，想右键看个网页源码，结果菜单弹都弹不出来？鼠标点半天，屏幕纹丝不动，还以为是自己电脑卡了——其实这不是浏览器出问题，是网站悄悄加了“防偷窥”的小限制。我之前帮一个做摄影的朋友扒图片素材，就遇到过这种情况：打开一个摄影网站，右键一按，啥反应没有，连“保存图片”的选项都看不到，更别说“查看源代码”了。后来才发现，这类网站为了保护自己的内容（比如图片、设计稿或者独家数据），会在代码里加一句“拦截右键”的指令，简单说就是藏了一行像“oncontextmenu=”return false””这样的代码，意思就是“只要用户点右键，菜单就别出来”，从源头断了直接看源码的路。
不过这招看着唬人，其实很好破解——浏览器早就给咱们留了“后门”，根本不用管右键能不能用。你试试直接按键盘上的F12键，不管是Chrome、Edge还是Firefox，按下去都会弹出一个开发者工具面板，有点像给网页开了个“透视模式”。要是你用的是笔记本，F12可能需要配合Fn键按（比如Fn+F12），Mac用户也可以用Command+Option+I，效果都一样。打开面板后，找到上面那排标签里的“Elements”（元素）点一下，这里显示的就是网页完整的HTML源码，而且比右键看源码还好用：鼠标移到代码上，网页里对应的按钮、图片或者文字就会高亮，哪段代码对应哪个部分清清楚楚。我上次帮朋友解决那个摄影网站的问题，就是这么操作的——按F12打开Elements，直接搜“.jpg”，三两下就找到了藏在源码里的高清图片链接，复制到地址栏就能下载，比跟网站较劲右键菜单快多了。所以记住，只要浏览器能打开网页，想看源码总有办法，F12这招基本能应对90%以上的右键限制，亲测有效。
查看网页源码会侵犯网站版权吗？
查看网页源码本身是合法的，因为源码是网页加载时传输到本地浏览器的公开信息。但需要注意：源码中的文字、图片、视频等内容可能受版权保护，未经允许不得擅自复制、传播或商用，避免侵犯知识产权。
为什么有的网页右键没有“查看源代码”选项？
部分网站会通过代码禁用右键菜单（比如添加oncontextmenu=”return false”），防止用户直接查看源码。这时候可以用更通用的方法：按键盘“F12”键打开开发者工具，切换到“Elements”（元素）选项卡，同样能看到完整源码，且不受右键限制影响。
看不懂代码符号，怎么快速找到想要的内容？
不用死磕代码语法，用“关键词搜索”就能定位。按“Ctrl+F”（Mac按“Command+F”）打开搜索框，输入目标内容相关的关键词：找标题搜
