让iOS的Safari浏览器支援检视网页原始码技巧，隐藏必学招式

如果有在从事网页设计工作，或是有自己在架站的用户，那时常都需要检视网页原始码，要找出网页结构哪里出问题，在使用电脑版很简单，不过在手机上就会相当麻烦，但是终究有解决方法，这次要来分享一款iOS专用的检视网页原始码App和直接透过Safari看见原始码，相信网页设计师朋友们一定会很想了解这些技巧。

iOS检视网页原始码技巧1：ViewSource

步骤1

这次采用的是ViewSource工具（载点在文末），可以免费取得，下载后直接开启在退回主画面。

步骤2

透过Safari开启想要查看原始码网站，点击最下方选单“分享”钮。

步骤3

从分享选单中，往下滑点击“ViewSource”按钮。如果是iOS12或更旧版本，则需要点击“更多”按钮，把“ViewSource”的选项开启，就能看见“ViewSource”按钮。

步骤4

就可以看见网页的原始码，而且还能够支援高亮效果，浏览起来就不会过于太吃力；另外还能够点击右上角分享按钮，会有两种功能“Find（搜索）”、“CopyURL（复制链接）”，前者功能是用来寻找关键字，会是多数人常用功能。

ViewSource下载位置：点我去下载

iOS检视网页原始码技巧2：隐藏招式

如果不想用App，那还有另一招式，也同样只要一键点击就能实现查看原始码方法。此技巧支援iPhone、iPad和iPodTouch设备，只能支援Safari上使用。

步骤1

透过Safari随便打开一个网页，压住最下方“书签”钮（右边数过来第二个），选择“加入书签”，将网站加入到Safari书签内。

步骤2

加入完毕后，进入书签列表，点击右下角“编辑”，选择刚刚加入的书签网址，并且将网址改成下面这段程序码，网站名称则是可以改成“看原始码”，最后点击完成即可。

—

javascript:(function(){vara=window.open(‘about:blank’).document;a.write(‘<!DOCTYPEhtml>’);a.close();varb=a.body.appendChild(a.createElement(‘pre’));b.style.overflow=’auto’;b.style.whiteSpace=’pre-wrap’;b.appendChild(a.createTextNode(document.documentElement.innerHTML))})();

—

步骤3

完成以上所有步骤后，就可以直接透过书签实现查看原始码功能，只要透过Safari打开网页，点击“书签”钮，按下刚建立好的“看原始码”书签，就能够在新分页中看见网页原始码，够方便吧？

不过这功能有个小缺点，只能够看纯文字原始码，无法显示高亮功能，所以要看原始码debug时候，就会导致非常吃力。

但iOS检视网页原始码技巧有两种方式，选择一种你觉得最方便的方法和容易排除问题的方式即可，最方便还是使用电脑网页版会比较容易些。