0
点赞
收藏
分享

微信扫一扫

手机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’.
  2. 手机firebug查看网页代码 How to View Website Source Codes on iPad / iPhone_Source

  3. 手机查看网页代码 How to View Website Source Codes on iPad / iPhone
  4.  
  5. Open this bookmarklet javascript, select all and copy the script.
  6. 手机firebug查看网页代码 How to View Website Source Codes on iPad / iPhone_javascript_02

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

  8. 代码:
  9. javascript:(function(){
  10. 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(); })();
  11.  

  12. Tap on the bookmark icon at the top left part of your mobile Safari browser, and tap on ‘Edit’
  13. 手机firebug查看网页代码 How to View Website Source Codes on iPad / iPhone_ico_03

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

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

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

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.



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

手机查看网页代码 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.


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

手机查看网页代码 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); })();


 

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

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

 


 

 

 

 

 

举报

相关推荐

0 条评论