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

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

1. 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

    
2. 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();
   })();

    

3. 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

    
4. Tap on the ‘View Source’ bookmark you created in step 1.
   
   

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

    
5. 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); })();

 

 

源自: https://getfirebug.com/firebuglite_mobile

 

原文/转自: 手机查看网页代码 How to View Website Source Codes on iPad / iPhone