Html source android browser

Браузеры для Android с функцией исследования элемента

Исследование элемента (оно же веб-инспектор) – это полезная функция, которая существует во всех ПК-браузерах и позволяет отлаживать верстку в режиме «Live» без внесения изменений непосредственно в файлы сайта.

Простыми словами – у вас есть сайт, и вы визуально (на своей стороне) можете изменить цвет, например, кнопки или размер шрифта без изменений самого сайта. Помимо этого, вы можете исследовать тот или иной элемент на странице, просмотреть его верстку и ознакомиться с его стилями.

С ПК в принципе все понятно, ведь именно на них идет основная часть всех разработок. Но есть умельцы, кто программирует или создает сайты на смартфонах/планшетах. Казалось бы неким безумием (сами понимаете удобство и возможности смартфонов), но вполне имеет место быть. Признаюсь, я сам на начальном этапе своего обучения пробовал создавать простенькие игры на телефоне с помощью Basic, но сейчас не об этом.

Поискав информацию в Интернете, я нашел несколько браузеров для Android, которые позволяют в некоторой степени исследовать элементы на том или ином сайте, о которых я вкратце и с удовольствием вам расскажу.

HTML/CSS Website Inspector – мощный браузер с веб-инспектором для Android

Многофункциональный браузер, содержащий в себе необходимые инструменты для веб-разработчика.

Отличительными особенностями являются:

1. Поиск и редактирование HTML-элементов.
2. Веб-консоль. Позволяет выполнить JavaScript.
3. Просмотр всего исходного кода сайта с возможностью его редактирования.
4. Функция исследования элемента. Позволяет показать код элемента, который выбран на странице.

1. Реклама в приложении.
2. Нет возможности визуально отслеживать CSS-стили элементов.
3. Нет возможности редактировать стили, вынесенные в отдельный файл.

Помимо этого, хочется отметить, что на момент написания статьи приложение активно развивалось автором и имело более 1 000 000 установок.

Поддержка Android 4.1+. Интерфейс на английском языке.

Web Inspector (Open Source) – браузер с инструментами разработчика для Android

Это приложение, в отличие от первого, немного проще, менее популярнее (всего чуть более 10 000 установок) и обновлялось несколько лет назад.

Несмотря на это, наделено своими интересными функциями, в числе которых:

1. Список сетевых ресурсов (изображения, скрипты, стили и прочее).
2. Веб-консоль. Отображает список HTTP/S запросов и позволяет выполнить JavaScript.
3. Поиск (исследование) и редактирование отдельных элементов. Дополнение – возможность показать ближайшего родителя.

1. Нет возможности посмотреть весь исходный код страницы.
2. Нет возможности визуально отслеживать CSS-стили элементов.
3. Нет возможности редактировать стили, вынесенные в отдельный файл.

Поддержка Android 4.0+. Интерфейс на английском языке.

Droid Web Inspector – браузер с полным набором инструментов разработчика для Android

Это приложение должно было быть первым в списке ввиду своего богатого функционала, но тогда бы вы не обратили внимание на другие, ничуть не уступающие ему браузеры.

Браузер с консолью разработчика, в функции которой входит:

1. Очистка кэша.
2. Веб-консоль. Отображает список HTTP/S запросов и позволяет выполнить JavaScript.
3. Полный исходный код страницы (HTML) с функцией отслеживания и редактирования стилей элементов.
4. Отображение дерева DOM.
5. Отслеживание JS- и CSS-файлов с возможностью их редактирования.
6. Отображение сетевых ресурсов (изображения, скрипты, стили и прочее).

1. Не идет на старых версиях Android.
2. Отсутствует исследование отдельных элементов. Возможно, баг моего телефона, но все элементы доступны в общем коде HTML.

В отличие от приложения Web Inspector (Open Source), на момент написания статьи имело всего чуть более 5 000 установок, но, несмотря на это, активно развивалось автором.

Поддержка Android 5.0+. Интерфейс на английском языке.

Источник

How to view the HTML source code of a web page

Every major Internet browser allows users to view the HTML source code of any web page they visit. The following sections contain information on the multiple ways to view the source code in each of the major browsers. To proceed, choose an entry from the list below and follow the instructions.

Introductory information

When viewing the source code of a web page, the information and code processed by the server won’t appear. For example, a search engine processes information on a server and then displays the results on a web page. In other words, you can view the code that makes up the results page, but you cannot view the search engine’s source code.

This rule applies to all server-side scripts, SSI, and programming code. Therefore, you cannot view a scripts source code used in search engines, forums, polls, chat, etc. Also, copying the information from the source code may cause errors or direct you back to the page from which you copied the information.

Google Chrome

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

View source code only

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

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

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

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.

Mozilla Firefox

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

View source code only

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

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

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

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.

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.

Microsoft Edge

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

View source code only

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

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

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

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

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

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

View page source with elements

1. Open Internet Explorer and navigate the web page whose source code you’d like to view.
2. Click Toolsin the upper-right corner.
3. Select F12 Developer Tools from the drop-down menu.

1. Click the DOM Explorer tab at the top-left corner of the developer tools menu.

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.

Safari

In Safari, viewing a webpage’s source code requires you to enable the developer options. The following sections show you how to turn on this feature, and then how to view the source code of a web page.

Accessing developer options in Safari

1. Open the Safari browser.
2. Select from the menu bar at the top-left corner of the screen.
3. In the drop-down menu that appears, select Preferences.

1. Click the Advancedtab, and check the box next to Show Develop menu in menu bar.

1. You should now see the Develop selector in the Apple menu bar at the top of the screen.

Viewing the source code

You must have the developer options enabled for the following steps to work.

1. Open Safari and navigate the web page whose source code you’d like to view.
2. In the Apple menu bar at the top of the screen, click the Develop selector and choose Show Page Source from the drop-down menu.
3. In the center of the screen, click the Elements tab at the top of the developer tools section.

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

Once the developer options are enabled, you can also press Command + option + U to view the source code of a page.

Opera

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

View source code only

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

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

View page source with elements

1. Open Opera and navigate the web page whose source code you’d like to view.
2. Click the Opera icon in the upper-left corner of the browser window.
3. Move your mouse over Developer 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.

If you don’t see the Developer submenu, choose More tools → Show developer menu. Then, click the menu button again. You should now see the Developer entry listed.

In Opera, 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.

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.

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.

If you find it difficult to navigate the source code on your mobile device using the method above, you may also want to consider an online tool.

iPhone or iPad using Safari

Viewing the source code of a web page on an iPhone or iPad takes a bit more work, but it is possible. The process requires you to create a bookmark, assign JavaScript code to it, and use the bookmark on a web page to view its source code.

If you’d prefer to use an app to view a web page’s source code, you can download the free View Source app from the iOS App Store.

Create a bookmark to view source code

1. Open the Safari browser on your iPhone or iPad.
2. Access any web page, such as www.computerhope.com.
3. Tap the More icon at the bottom of the screen.

You can also press and hold your finger on the Bookmark icon at the bottom of the screen until a menu appears.

1. In the menu that opens, tap the Add Bookmark option.

1. Tap in the bookmark name field, tap the x on the right side to clear the current name, and enter «View web page source code» as the new name.

1. Tap Save in the top-right corner to save the bookmark.
2. Copy the entire JavaScript code snippet below.

1. In Safari, access the bookmarks by tapping the bookmarks icon at the bottom of the screen.

1. Find the bookmark you created above, then press and hold your finger on the bookmark until a menu opens at the bottom of the screen.
2. Tap the Edit option on the menu.

1. On the Edit Bookmark screen, tap the URL and then tap the x to clear the URL, then paste the JavaScript code from step 7 into the URL field.

1. Tap Done at the bottom-right of the screen to save the bookmark changes.

Use a bookmark to view source code

After you’ve created the bookmark above, you can now view the source code for a web page.

1. In Safari, access the web page where you want to view the source code.
2. Tap the bookmarks icon at the bottom of the screen.

1. Tap the View web page source code bookmark you created.

A new Safari browsing tab opens, displaying the source code for the web page.

If you have difficulties navigating the source code on your mobile device using the above method, you may also want to consider using an online tool.

How to close the source code page or tool

Once you’re done viewing the source code on a web page, you may want to exit or close it. Closing the source code depends on the method you’ve used to open it.

• If you’ve used the Ctrl + U method (except Edge) or the right-click method, close the new tab that opened at the top of your browser window.
• If you’ve used the developer method (using F12 or Ctrl + Shift + I ), press those same keys again, or click the icon in the upper-right corner of the tools window.

Use an online tool to view the source code

In addition to using a browser, there are several online tools that allow you to view the source code of any web page. These tools may be helpful because most can format, stylize, and highlight the code to make it easier to read. Below is a short list of some of these tools:

Источник