How To Open Source Code File In iPhone

Open source code file. This app allow you to search, view and open any type of iOS supported, text-based file format with syntax coloring and in-built Linter for most popular languages. You can also zip and unzip your files to save space on your device or to share them through email. Try it now

Our smartly designed software is compatible with all popular devices, so you can work on your projects from everywhere. This way you can always stay up to date with the latest updates.

Create a View Source Shortcut 

The first I recommend is to create a View Source shortcut that is available in Share Sheet, so you can easily access it from Safari. Shortcuts is a stock app in iOS 13 or new versions for automation. There are many amazing pre-made shortcuts that you can get from the internet. 

Here I will show you how to make one to view HTML source code step by step. You can refer to the steps below or the video.  If you don’t want to make it by yourself, you can also click this link to add it to your Shortcuts Library. https://www.youtube.com/embed/TvOcGhmPd50?feature=oembed&enablejsapi=1&origin=https%3A%2F%2Fchrunos.com

Step 1. Open the Shortcuts on your iPhone or iPad. Tap on the “+” icon to create a new one. 

Step 2. Tap on the three-dot icon and enable the option “Show in Share Sheet”. Tap Done to go back to the new shortcut.

Step 3. Type “html” in the search bar and drag the “Make HTML from Rich Text” action from the search results to the shortcut.

Step 4. Type “quick look” in the search bar and drag the “Quick Look” action to the shortcut. 

Step 5. Tap “Done” to save the shortcut and change the shortcut name to “View Source”.

Step 6. Go to Safari and open the web page where you want to view the source code. Tap the Safari Share button and select the “View Source” shortcut that you just created. 

Shortcuts only accept Safari web pages, so if you want view source code on Chrome or other web browsers, keep reading to find other alternative methods.

Google Chrome

To view the source code of a web page in Google Chrome, use any of the following methods.

View source code only

Method one

To view only the source code, press the shortcut keys Ctrl+U on your computer’s keyboard.

Method two

Right-click a blank part of the web page and select View page source from the pop-up menu that appears.

View page source in Chrome.

View page source with elements

  1. Open Chrome and navigate the web page whose source code you’d like to view.
  2. Click the Customize and control Google Chrome Chrome settings icon icon in the upper-right corner of the browser window.
  3. From the drop-down menu that appears, select More tools, then select Developer tools.
  4. Click the Elements tab in the top-left corner of the new section that appears at the bottom of the screen.
Elements tab in Chrome.

Tip

In Chrome, pressing F12 or Ctrl+Shift+I also brings up the interactive developer tool. This tool provides much more interaction with the source code and CSS settings, allowing users to see how changes in the code affect the web page immediately.

Safari Bookmark Trick

Another way to view source code is via Safari bookmark. You can use bookmark to run a javascript and it will show the source code of any web page. 

Step 1. Copy the script. You can go to this Github page and copy the script or copy the script below. 

javascript:(function()%7Bvar a=window.open('about:blank').document;a.write('<!DOCTYPE html><html><head><title>Source: '+location.href+'</title><meta name="viewport" content="width=device-width" /></head><body></body></html>');a.close();var b=a.body.appendChild(a.createElement('pre'));b.style.overflow='auto';b.style.whiteSpace='pre-wrap';b.appendChild(a.createTextNode(document.documentElement.innerHTML))%7D)();

Step 2. Tap your browser (Chrome or Safari) Share button and select Add Bookmark. It doesn’t matter which web page you add. You just need to create a new bookmark for further usage. 

View Page Source iPhone

Step 3. Tap on the Bookmark icon and locate the new bookmark that you just created.

Step 4. From there, tap Edit and change the new bookmark name to “View Page Source” and the URL to the script that you copied before.

Step 5. Go to the webpage where you want to view source code. Tap the Bookmark icon and select the View Page Source bookmark that you just saved. 

Then it will display the source code of that web page. If you use Chrome, it is even simpler because you can change the bookmark URL on Step 2.

Mozilla Firefox

To view the source code of a web page in Mozilla Firefox, use any of the following methods.

View source code only

Method one

To view only the source code, press Ctrl+U on your computer’s keyboard.

Method two

Right-click a blank part of the web page and select View Page Source from the pop-up menu that appears.

View page source in Firefox.

View page source with elements

  1. Open Firefox and navigate the web page whose source code you’d like to view.
  2. Click the Menu Firefox Menu Icon icon in the top-right corner of the screen.
  3. Select Web Developer in the drop-down menu, then select Toggle Tools from the expanded menu.
  4. Click the Inspector tab in the top-left corner of the section that appears at the bottom of the screen.
Firefox Inspector tab.

Tip

In Firefox, pressing F12 or Ctrl+Shift+I also brings up the interactive developer tool. This tool provides interaction with the source code and CSS settings, allowing users to see how changes in the code affect the web page in real time.

View a section of the page’s source code

  1. Highlight the portion of a web page for which you’d like to view the source code.
  2. Right-click that highlighted section and select View Selection Source.

Tip

You can use the Firebug add-on to view and edit the source code of a page, and view the changes live through the browser.

View Source App for iOS

You can also download a dedicated app for viewing HTML source code. For that, I recommend the free app View Source, which is designed for iPhone. Once you installed this app, you will see an option View Source in your Web Browser (Safari or Chrome) Share Sheet. You can simply tap on it to see the source code. 

Microsoft Edge

To view the source code of a web page in Microsoft Edge, use any of the following methods.

View source code only

Method one

To view only the source code, press Ctrl+U on your computer’s keyboard.

Method two

Right-click a blank part of the web page and select View page source from the pop-up menu that appears.

View page source selector in Edge.

View page source with elements

  1. Open Microsoft Edge and navigate the web page whose source code you’d like to view.
  2. Click the Settings and more Edge more icon icon in the upper-right corner of the screen.
  3. Move your mouse over More tools in the drop-down menu, and select Developer tools from the expanded menu.
  4. Click the Elements tab at the top of the window that appears on the right side of the screen.
Elements tab in Edge.

Tip

In Microsoft Edge, pressing F12 or Ctrl+Shift+I also brings up the interactive developer tool. This tool provides interaction with the source code and CSS settings, allowing users to see how changes in the code affect the web page in real time.

Microsoft Internet Explorer

To view the source code of a web page in Microsoft Internet Explorer, use any of the following methods.

View source code only

Method one

To view only the source code, press Ctrl+U on your computer’s keyboard.

Method two

Right-click a blank part of the web page and select View source from the pop-up menu that appears.

View source selector in Internet Explorer.

View page source with elements

  1. Open Internet Explorer and navigate the web page whose source code you’d like to view.
  2. Click Tools Internet explorer tools icon in the upper-right corner.
  3. Select F12 Developer Tools from the drop-down menu.
  4. Click the DOM Explorer tab at the top-left corner of the developer tools menu.
DOM Explorer tab in Internet Explorer.

Tip

In Internet Explorer, pressing F12 brings up the DOM tool. This tool provides interaction with the source code and CSS settings, allowing users to see how changes in the code affect the web page immediately.

How to View Source on a Default Mobile Browser

The stock Android browser allows the view-source: URL tweak. On iOS, however, the stock Safari app does not support this feature. On Apple’s platform, you’ll need to launch a different browser or a source-code viewing app from the App Store.

Individual mobile browsers that you installed from your platform’s app store behave differently. Consult the browser’s documentation for specific procedures.

Android phone or tablet using Chrome

  1. Open the Google Chrome browser on your Android phone or tablet.
  2. Open the web page whose source code you’d like to view.
  3. Tap once in the address bar and move the cursor to the front of the URL.
  4. Type view-source: and tap Enter or Go.

Tip

For example, to view the code for our homepage, you would type view-source:https://www.computerhope.com

If the steps above don’t work on your Android phone, use the method in the iPhone or iPad using Safari section. The same code works on Android phones, the only differences are using Chrome instead of Safari, and the process to create and edit a bookmark.

Conclusion

Learn how to open iPhone source code file by using a software called iLash. iLash is a software application tool for windows that you can use to open and edit iPhone source code file.

0 Comments

No Comment.