手机firebug查看网页代码 How to View Website Source Codes on iPad / iPhone

最新推荐文章于 2025-11-27 12:57:01 发布

原创最新推荐文章于 2025-11-27 12:57:01 发布 · 442 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #ViewUI

Phone / IOS / Objective-C / Swift 专栏收录该内容

136 篇文章

订阅专栏

本文介绍了一种在iPad和iPhone上查看网页源代码的方法。通过创建一个名为'ViewSource'的书签并利用特定JavaScript代码，用户可以轻松地在移动设备上查看任何网站的源代码，并以高亮语法的形式呈现。

You’re using your iPad to browse the Web and you’re curious to view the source of a webpage but don’t have the options to do so. The next thing you know, you’re swapping back to your Mac or PC to open up the same website to check the Page Source. Now if that isn’t called a hassle, I don’t know what is.

To make things easier for all iPad and iPhone users out there, here’s a trick to allow you to view the source of a webpage straight from your mobile device. Take note that the code you will be using will redirect you to the creator’s website, where the source is presented in highlighted syntax and clickable URL for easier reading.

Set up ‘View Source’ Bookmark

To get started, open your mobile Safari on your Apple device and bookmark the page you are reading by clicking on the bookmark button. Instead of the page name, name it ‘View Source’ and then click ‘Save’.

手机查看网页代码 How to View Website Source Codes on iPad / iPhone

Open this bookmarklet javascript, select all and copy the script.

手机查看网页代码 How to View Website Source Codes on iPad / iPhone

代码：

javascript:(function(){
    var w = window.open('about:blank'),
        d = w.document;
    d.write('');
    d.close();
    var f = d.createElement('form');
        f.setAttribute('method','post');
        f.setAttribute('action','https://ole.michelsen.dk/viewsource/?uri='+encodeURIComponent(location.href));
    var i = d.createElement('input');
        i.setAttribute('type','hidden');
        i.setAttribute('name','DOM');
        i.setAttribute('value',encodeURIComponent(document.documentElement.innerHTML));
    d.body.appendChild(f).appendChild(i);
    f.submit();
})();

Tap on the bookmark icon at the top left part of your mobile Safari browser, and tap on ‘Edit’

手机查看网页代码 How to View Website Source Codes on iPad / iPhone
Tap on the ‘View Source’ bookmark you created in step 1.

手机查看网页代码 How to View Website Source Codes on iPad / iPhone
Now paste the bookmarklet javascript you copied in step 2 into the URL bar and tap ‘Done’.

手机查看网页代码 How to View Website Source Codes on iPad / iPhone

View Source On Safari on iPad and iPhone

Now that you have created a new bookmark called ‘View Source’, to view source of any webpage, open any site from your Safari browser, tap on the bookmark icon and then tap on the ‘View Source’ bookmark.

手机查看网页代码 How to View Website Source Codes on iPad / iPhone

This bookmark shortcut will send a request to the creator’s server for processing and then open a new browser tab for you to view the source in highlighted syntax.

手机查看网页代码 How to View Website Source Codes on iPad / iPhone

Conclusion

This method to ‘view source’ is not similar to web developer tools where you have it as an extension to your browser, but creating this bookmark is to save a shortcut to the creator’s website where you can view any website’s source with highlighted syntax.

源自：http://www.hongkiat.com/blog/view-source-codes-in-ipad-iphone/

同样的方法，你也可以使用firebug的js

javascript:(function(){ var fb = document.createElement('script');
fb.type = 'text/javascript'; fb.src = 'https://getfirebug.com/firebug-lite.js#startOpened';
document.getElementsByTagName('body')[0].appendChild(fb); })();