让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检视网页原始码技巧有两种方式,选择一种你觉得最方便的方法和容易排除问题的方式即可,最方便还是使用电脑网页版会比较容易些。