Как посмотреть код программного обеспечения

Обновлено: 30.06.2024

Я пытаюсь понять Linux, и я часто решаю свои проблемы в каждом конкретном случае, фактически не изучая, как придумать ответ сам, что, конечно, я предпочитаю не делать.

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

Я нашел ответ как обычно, однако на этот раз я хотел бы знать, как люди обычно подходят к этому, если не было ответа. Конечно, должен быть логический набор шагов, чтобы точно определить, как работает терминальная команда / где она принимает свои аргументы.

Для этого конкретного случая я искал в Интернете, какую команду использует Ubuntu для создания снимков экрана, которая оказывается import ,

Так что мой вопрос в том, каков подход (ы) к

Найдите информацию о файлах конфигурации / местоположении / уровне кода (например, не о том, как ее вызывать, а о том, что конкретно она делает, когда вызывается) команды терминала

Как узнать, какой терминальной команде соответствует конкретное действие. (Выяснение import называется когда я сделал скриншот например)

Другими словами, как я мог понять это сам, если у меня не было доступа к Интернету, или никто не знал ответа?:) Меня больше интересует подход / логика, однако import в этом случае будет хорошим примером.

Я не думаю, что мой вопрос совпадает с предложенным возможным дубликатом, потому что я прошу способ добраться до исходного кода, если это возможно. Другими способами, я прошу способ прочитать исходный код команды и файлы, которые она использует (например, может быть, есть файл конфигурации для функции импорта, и если бы я мог его найти, я бы изменил default-save- каталог). Чтобы уточнить еще, файл, который я пытаюсь найти (если это возможно, найти) код, эквивалентный следующему псевдокоду:

Это должно быть сохранено где-то в операционной системе. "Это невозможно, потому что. " (возможно, это на уровне сборки) также является ответом, но использование man для получения инструкций о том, что делает эта функция, не является ответом, потому что я хочу понять, как она работает.

Другими словами, если ниндзя Linux должен был изменить команду импорта на своем локальном компьютере, куда он пойдет и скажет добавить подпись на изображениях, сохраненных со скриншотом.

4 ответа

Да, вы можете легко найти и прочитать исходный код всего в мире Linux, за исключением некоторых крайних случаев (таких как драйверы видеокарты только для двоичного кода).

Например, чтобы узнать больше о ls команда, Google ls source code , который даст вам один специальный удар Google прямо вверху, который говорит вам, что ls является частью coreutils ,

Coreutils, которые являются GNU, а не Linux, - это команды, которые вы используете весь день в большинстве дистрибутивов. С этой целевой страницы вы легко можете либо загрузить весь tar-архив, либо просмотреть его git-репозиторий напрямую.

Например, это наиболее интересный каталог (на данный момент ссылка показывает фиксированный хеш, поэтому обязательно просмотрите сверху снова, если вы прочитаете этот ответ позже): историческое представление "src" в основной ветке

Подобные подходы работают для всех других программ с открытым исходным кодом, включая само ядро.

which ls показывает, где находится этот конкретный двоичный файл.

Стандарт файловой системы Linux перечисляет все обычные места, где хранятся файлы.

В зависимости от вашего дистрибутива вы можете более или менее легко загружать исходные пакеты через менеджер пакетов (например, apt-get source $package ), что должно быть еще более безболезненным. Это имеет очевидное преимущество: а) это очень просто и б) должно возвращать именно ту версию исходного кода, которую фактически использует ваш бинарный файл. В зависимости от распределения конечно.

Суть вашего вопроса в том, как узнать о поведении какого-либо программного обеспечения. Обычно это нетривиально, если вы просто выбираете источник. В крайних случаях, т. Е. Если программное обеспечение действительно критично / важно для вас, и вы обязательно должны заставить его работать, это может быть жизнеспособным путем, но в целом вам лучше не гуглить. Я выполнил свою часть (ab), используя исходный код больших пакетов, особенно при компиляции программного обеспечения (часто бывают странные крайние случаи, когда библиотеки или версии компилятора имеют небольшие несоответствия), и я уверяю вас, что это может быть выполнено, но часто много работы.

Относительно того, как другие люди узнают; часто они делают это потому, что на самом деле работают с программным обеспечением, и с ними связываются через их баг-трекер - знание базы кода уже очень помогает.

Тогда есть, конечно, ваши настоящие хакеры, которые на самом деле любят углубляться в исходный код для всего, о чем они спотыкаются.

В общем, для любой реальной проблемы, невероятно вероятно, что кто-то уже имел это и написал об этом, так что поиск в Google, конечно, не плохой подход. Использование правильных ключевых слов может быть искусством само по себе.

Все это приятно и весело, но если вы хотите глубоко проникнуть в кроличью нору, вы можете загрузить Linux с нуля. Этот веб-сайт поможет вам полностью построить (хотя и очень небольшую) систему Linux с нуля, то есть из исходного кода. Нет готовых двоичных файлов вообще.

Быстрый ответ:

Исследуйте терминальную команду.

Там нет абсолютного правила набора, где хранятся переменные или детали. Если вы не знаете подробностей терминальной команды, вам придется посмотреть ее, чтобы быть уверенным.

У большинства команд терминала, особенно у команд, которые имеют много опций, есть руководства, которые установлены в системе по умолчанию, что упрощает поиск. Это также включает в себя оболочку для команд терминала, которая в случае с Ubuntu bash по умолчанию.

До того, как Интернет стал настолько популярным, что он не знал, на что вы ссылаетесь, люди полагались на библиотеки, книги и руководства. У людей было много книг и руководств в их доме. Они часто ходили в книжный магазин и библиотеку. Раньше я проводил много часов в библиотеке, почти всегда две или три книги проверяли на предмет домашнего исследования (или программирования и команд). Прошло около 20 лет с тех пор, как я пошел в библиотеку, чтобы заняться исследованиями. Я время от времени хожу в библиотеку на какие-то семинары или встречи. Я также принадлежал к двум компьютерным клубам, которые делились информацией. Оба клуба публиковали ежемесячные информационные бюллетени, которые включали важную информацию о компьютерах и программировании.

Если у вас нет доступа к Интернету, вы можете использовать руководства, которые уже являются вашим компьютером, для команд терминала.

Спасибо за терминальную команду и введите это:

Вы можете исследовать bash и команду import (из вашего вопроса) с помощью:

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

Чтобы узнать подробности переменных команды, вам нужно изучить конкретную команду. Некоторые из одних и тех же команд могут даже иметь различные разновидности или варианты, которые могут хранить некоторые из этих переменных или подробностей в другой области в зависимости от дистрибутива Linux или сопровождающего конкретной команды.

Как скачать исходный код команд и приложений Ubuntu:

Вы можете скачать исходный код команд, добавив исходный код в свой репозиторий. Вы можете найти это по:

Используйте эту команду для получения исходного пакета, который вы хотите загрузить:

В предыдущей части мы затронули азы программирования, где рассказали о машинном языке, преобразователях, языках программирования и работе с CLI. Двигаемся дальше.

Исходным кодом называется основной файл вроде Microsoft (.doc), но немного другой. Это текстовый файл, написанный с помощью простых редакторов, таких как Windows Блокнот. В предыдущем разделе мы перечислили, что нужно, чтобы интерпретаторы или компиляторы конвертировали исходный код в двоичный. Первый должен быть сохранен в файле, что передается для ввода в переводчик (преобразователь).

В зависимости от выбранного языка, есть назначенные расширения для сохранения файла: Python – .py. Java – .java. PHP – .php, PERL – .pl и т. д.

Когда вы закончите писать код, запустите его через переводчик. Рассмотрим в качестве примера запуск кода на языке Python с использованием команды python.

Начало работы: ваша первая программа

Следуйте приведенным здесь инструкциям, чтобы настроить Python в вашей компьютерной системе.
Установите простой редактор, чтобы ввести исходный код. Для начала можете использовать этот текстовый редактор.

3. Откройте в нем новый файл и введите следующее:

Не забудьте сохранить файл как main.py.
Найдите путь к файлу через CLI и введите следующую команду:

Результат должен выглядеть так:

Анатомия типичного кода

Теперь мы рассмотрим содержимое типичного файла исходного кода. Ниже приведены регулярные компоненты.

Ключевые слова

Короткие человекочитаемые слова, обычно называемые ключевыми. Они свойственны изучаемому вами языку и они особенны. Их просто нужно знать. Вот небольшой набор ключевых слов, часто используемых в Python.

Идентификаторы

Слова, изобретенные вами. Да, не удивляйтесь! Вы, программист. Эти слова обычно называются идентификаторами. Они могут быть созданы вами или другими программистами. Они упакованы в плагины, более известные как библиотеки.

Примером является библиотека Math. Она позволяет получить доступ к функциям, таким как квадратный корень (Math.sqrt), используемый в JavaScript.

Многие языки программирования поставляются со множеством библиотек. Они обычно называются SDK (комплекты разработки программного обеспечения). Загружаются вместе с компилятором для дальнейшего создания технологий, приложений и проектов. Также существуют фреймворки, созданные, чтобы облегчить разработку проекта и объединить его различные составляющие.

Некоторые идентификаторы в комплекте с выбранным языком не могут использоваться в качестве идентификатора пользователя. Примером является слово string в Java. Такие идентификаторы вместе с ключевыми словами называются Зарезервированными Словами. Они также являются особыми.

Все ключевые слова являются зарезервированными. Также слова, которые вы выбираете, должны иметь смысл для тех, кто впервые их видит.

Основные типы данных

Исходный код – сосредоточение разных типов даннх: числа (3, 5.7, -100, 3.142) и символы (M, A). В некоторых языках программирования числа разбиваются на подтипы, такие как integers (целые числа).

Целые числа могут быть знаковыми и беззнаковыми, большими и малыми. Последние фактически зависят от объема памяти, зарезервированного для таких чисел. Есть числа с десятичными частями, обычно называемые double и float, в зависимости от языка, который вы изучаете.

Также существуют логические типы данных boolean, которые имеют значение true или false.

Сложные типы данных

Указанные выше типы известны как элементарные, первичные или базовые. Мы можем создавать более сложные типы данных из приведенных базовых.

Массив (Array) – это простейшая форма сложного типа. Строка (String) – это массив символов. Мы не можем обойтись без этих данных и часто используем их при написании кода.

Сложные типы данных поставляются с большинством языков программирования, которые используются. Есть и другие, такие как системы классов. Это явление также известно как объектно-ориентированное программирование (ООП).

Переменные

Переменные – это просто имена областей памяти. Иногда нужно сохранить данные в исходном коде в месте, откуда их можно вызвать, чтобы использовать. Обычно это место памяти, которое резервирует компилятор/интерпретатор. Нам нужно дать имя этим ячейкам памяти, чтобы потом их вспомнить. Рассмотрим фрагмент кода Python ниже:

pet_name – пример переменной, и тип данных, хранящихся в pet_name, является строкой, что делает переменную строковой. Существуют также числовые. Таким образом, переменные классифицируются по типам данных.

Константы

Константы – это значения, которые не изменяются на протяжении всего жизненного цикла программы. Чаще всего в их именах используются заглавные буквы. Некоторые языки поддерживают создание постоянных значений, а некоторые – нет.

Существуют строго типизированные языки программирования, в которых каждая переменная должна быть определенного типа. Выбрав тип один раз, вы больше не сможете его изменить. Java – хороший пример такого ЯП.

Другие же не предоставляют эти функции. Они являются свободно типизированными или динамическими языками программирования. Пример – Python.

Вот как объявить постоянное значение в JavaScript:

Литералы

В каждом исходном коде существуют типы данных, которые используются повсюду и изменяются только в том случае, если их отредактировали. Это литералы, которые не следует путать с переменными или константами. Ни один исходный код не обходится без них. Литералы могут быть строками, числами, десятичными знаками или любыми другими типами данных.

Пунктуация/Символы

В большинстве написанных программ вы найдете различные знаки препинания в зависимости от выбранного языка программирования. Например, в Java используется больше знаков препинания, чем в Python.

Основные знаки включают в себя запятую (,), точку с запятой (;), двоеточие (:), фигурные скобки (<>), обычные круглые скобки (()), квадратные скобки ([]), кавычки ("" или ''), вертикальную черту (|), слэш (\), точку (.), знак вопроса (?), карет (^) и процент (%).

Операторы

Шансы, что вы будете писать исходный код для выполнения какой-нибудь операции, крайне высоки. Любые языки программирования, которые мы используем, включают в себя множество операторов. Среди применяемых выделяют сложение (+), деление (/) умножение (*), вычитание (-) и знак больше (>).

Операторы обычно классифицируются следующим образом:

Операторы присваивания. Они иногда истолковываются как equals, что неправильно. Равенство используется для сравнения двух значений. А вот оператор присваивания присваивает значение переменной, например pet_name = 'Hippo'
Арифметические операторы. Состоят из операторов для выполнения арифметических задач, таких как сложение и вычитание. Некоторые языки программирования предоставляют арифметические операторы, когда другие могут их не иметь в своем арсенале. Например, оператор модуля/остатка (%) возвращает остаточное значение в операциях деления.
Реляционные операторы. Используются для сравнения значений. Они включают в себя больше, меньше, равно, не равно. Их представление также зависит от того, какой язык программирования вы изучаете. Для некоторых ЯП не равно – это <>, для других же – != или !==.
Логические операторы. Применяются для произведения логических операций. Обычно используемыми логическими операторами являются и, или, нет. Некоторые языки представляют эти операторы в виде специальных символов. Например, && для представления логического и, || – для или, и ! – для нет. Логические значения принято оценивать с помощью булевых значений true или false.

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

Компилятор игнорирует строки кода, которые являются комментариями.

Вот пример комментария в Python:

Пробелы и вкладки

Это пробелы, созданные между кодом, который вы пишете. Они ставятся при нажатии пробела или клавиши табуляции на клавиатуре.

Двигаемся дальше

Вы познакомились с исходным кодом и изучили его содержимое. Скомпилированный или преобразованный код может не запускаться по ряду причин. Эти причины обычно связаны с ошибками. Действие поиска и удаления ошибок называется отладкой и является навыком, который вы должны изучить. Ошибки мы рассмотрим в следующей части.

Убедитесь, что вы правильно настроили Python в своей компьютерной системе, и запустите свою первую программу.

Викторина

Определите элементы, которые мы изучили, в приведенном ниже фрагменте кода Java:

Кажется, что программирование — это сложно, особенно если никогда не приходилось с ним сталкиваться. На самом деле всё зависит от задачи. Чтобы вносить небольшие изменения на сайт, хватит и азов, а их может освоить даже человек без технического образования. Об этих азах и пойдет речь в статье. Расскажем об устройстве исходного кода, о том, как начать в нём немного разбираться, и ответим на вопрос, зачем всё это вам нужно.

Примечание: мы не будем лезть в дебри и подробно описывать процесс программирования. Расскажем о том минимуме, что пригодится в работе над вашим сайтом.

Зачем понимать исходный код

Сначала поговорим о том, зачем вам нужно что-то знать о коде, если вы не программист. Да, здорово расширять свои границы. Но главное, что вы можете получить из этого знания — пользу для бизнеса.

Зная, как устроен исходный код, вы сможете:

Больше понимать в SEO-продвижении.

Если просто смотреть на страницу сайта, вы не сможете проанализировать, правильно ли настроено SEO-продвижение, а инструменты для анализа не всегда могут быть под рукой. Только в коде проверяют, на месте ли метаданные и обязательные элементы — основная информация для успешного SEO. Поэтому заглядывать в исходный код становится обычной практикой маркетологов или владельцев бизнеса, которые сами занимаются продвижением.

Плюс вам больше не будет казаться магией работа SEO-специалиста. Вы будете говорить на одном языке и понимать, как поисковики видят ваш сайт и что можно улучшить.

Анализировать сайты конкурентов на более глубоком уровне.

Если вы решите проанализировать сайты конкурентов, немного разбираясь в коде, вы сможете оценить не только визуальную и контентную стороны страниц. У вас получится определить, с помощью каких ключевых слов продвигается сайт, на какой CMS работает и немного больше понять стратегию продвижения конкурентов.

Составлять грамотные ТЗ для разработчика самостоятельно.

Вам будет легче представить и объяснить разработчику, как вы видите свою задумку. А значит, на финальной стадии работ не окажется, что всё сделано не так, а деньги и время уже потрачены.

Когда программист будет объяснять вам, в каких правках нуждается сайт компании, вы всё поймёте и сможете на равных обсудить это с сотрудником. Вам будет проще нанимать человека на IT-должность и разбираться в сметах на обслуживание сайта.

Экономить, самостоятельно внося изменения в сайт.

Экономнее изучить азы программирования и быстро устранять проблемы самостоятельно вместо того, чтобы нанимать программиста для выполнения небольших, но частых задач. Например, менять размеры баннеров или цвет текста на странице.

Что такое исходный код сайта

Национальная библиотека им. Н. Э. Баумана говорит, что исходный код — это текст компьютерной программы, который может прочитать человек, на языке программирования или языке разметки.

Именно код скрывается за внешней стороной любой интернет-страницы. Он выглядит как список пронумерованных строк с информацией о том или ином элементе страницы.

Как посмотреть код любого сайта

Расскажем, как посмотреть исходный код страницы в браузере Google Chrome. В остальных браузерах этот процесс примерно такой же.

Код вызывается одной из комбинаций:

Панель с кодом откроется на этой же странице, а не в другом окне. При наведении мышки на код будет подсвечиваться соответствующая ему область на текущей странице.

Дальше в статье мы будем пользоваться именно этим инструментом — он нагляднее.

Чтобы не утонуть в огромном количестве новых символов, нужно разобраться, что такое HTML, CSS и JavaScript.

Что такое HTML

HTML — язык гипертекстовой разметки. На нём написано большинство сайтов в интернете.

Что можно узнать о сайте из исходного кода

Код сайта предназначен в первую очередь для браузера и поисковых систем. Браузеру он говорит, что и в каком порядке выводить на странице. Поисковые системы берут из исходного кода всю информацию о странице: заголовок, описание, метаданные — всё то, что потребуется, чтобы показать страницу в выдаче поисковика. Обычный пользователь тоже может прочитать этот специальный текст — достаточно знать, как он устроен.

Все элементы кода нужны для правильного расположения разделов и деталей страницы. Всё это вы сможете найти и проанализировать, внимательно изучив исходный код сайта:

текст, который есть на странице;
цвета, шрифты и размеры элементов страницы;
иллюстрации, фотографии и другие детали;
ссылки;
важные теги, метатеги и атрибуты кода;
скрипты, счётчики, генераторы заявок, коды идентификации в системах и пр.;
данные JavaScript;
ошибки и поломки в коде и прочее.

Чтобы лучше понять теорию, разберёмся в коде страниц блога RU-CENTER: найдём теги, картинки и другую информацию.

Для начала открываем страницу и вызываем интерактивный код (Ctrl + Shift + I). Откроется интерактивная панель с кодом, поделённая на две области. Слева — HTML-код (вкладка Elements), справа — CSS (вкладка Styles). Нам пока нужна левая часть с HTML.

Основные теги

Мы не любим читать чужой код по той причине, что он написан не нами. Само собой разумеется, что в глубине души мы считаем себя лучшими программистами на планете и никто не сможет написать такой крутой код, как мы. Написание кода — это интенсивный мыслительный процесс, а пассивный читатель не испытывает ничего подобного.

Код, который вы видите на экране, мог быть написан несколькими людьми. Возможно, в процессе споров и сотрудничества. Возможно, им потребовались недели, чтобы выдать код, который обходил какие-то недокументированные ограничения, о которых вам неизвестно, и это знание осталось только в головах тех, кто его писал.

Все, что вы увидите как читатель — это законченный продукт. И если не провести некоторых раскопок, единственный контекст, с которым вы будете работать — это тот самый код на вашем экране.

1. Учитесь копать

git blame

Эта команда позволит вам получить имя автора, дату последних изменений и хэш коммита для каждой строчки кода. Познакомьтесь с авторами. Если вам повезет, их будет не так много, и они могут до сих пор работать на своем месте, так что вы сможете обращаться к ним за помощью. Если вам не повезло - это будут десятки авторов, о которых вы никогда раньше не слышали. В любом случае, попытайтесь определить главных контрибьюторов. Если вы наткнулись на странную функцию, в которой не можете разобраться, используйте git blame , чтобы выяснить ее автора и расспросить его лично.

git log

Также git log может показать вам историю отдельного файла, для этого используйте флаг -p: git log -p index.js . Обращайте внимание на имена авторов коммитов, чтобы знать, кому в будущем адресовать вопросы.

2. Вернитесь в прошлое

Вы можете переключиться на какой угодно коммит и запустить проект так, как будто бы этот коммит был последним. Вам может понадобиться переключиться на коммит, который был последним перед появлением какой-нибудь сложно отслеживаемой проблемы. А может вам просто станет скучно и вы захотите покопаться в истории кода и увидеть, каким был проект за годы до того, как вы туда пришли.

3. Читайте спецификации

Спецификации — это новые комментарии. Читайте юнит-спецификации, чтобы выяснить предназначение функций и модулей, и возможные пограничные случаи (edge-cases), которые они обрабатывают. Читайте интеграционные спецификации, чтобы выяснить, как пользователи будут взаимодействовать с вашим приложением и какие процессы поддерживает ваше приложение.

4. Думайте о комментариях, как о подсказках

Если вы наткнулись на непонятную функцию и прочли комментарий к ней, который еще больше вас запутал, возможно, что этот комментарий просто устарел и не обновлялся.

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

5. Найдите Main

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

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

Выполните git blame на этом файле и посмотрите, какие части основного файла были изменены недавно. Недавно измененный код может подсказать вам, над какими проблемами работала команда в последнее время. Возможно, они представили новую библиотеку, или долго пытались наладить библиотеку, которая не слишком хорошо работала. А может быть, там просто какой-то бойлерплейт код, который нужно регулярно обновлять.

Попробуйте найти отсылки к этим модулям в других частях кода, чтобы понять, как и когда они используются. Это может помочь вам понять место и роль модулей в основном приложении.

6. Обращайте внимание на стиль.

Вы ведь изучаете это приложение не просто так, и рано или поздно ваш код тоже туда попадет, поэтому обращайте внимание на стиль. Это включает в себя такие вещи как соглашение о стандартах оформления кода: именование, пробелы, скобки, а также соглашение о написании кода.

Каков общий уровень абстракции? Если это высокоабстрактный код со многими уровнями абстракции, то вам следует писать так же. Если вы хорошенько покопались в истории, то наверное сможете найти момент, когда один из разработчиков решил абстрагировать часть кода. Как он выглядел до этого, и что стало с ним после выноса на новый уровень абстракции? Пытайтесь следовать тем же соглашениям, когда пишете свой код.

Если опускаться на микроуровень, смотрите, какие конструкции используют остальные разработчики вашей команды. Если они отдают предпочтение циклам, а не функции map , то наверное и вам следует предпочесть циклы. Если вы хотели бы изменить какие-то соглашения, то обсудите с вашей командой возможность их изменения в будущем, а не начинайте смешивать разные стили в одном файле. Хороший код выглядит так, будто весь он написан одним и тем же человеком. Быть последовательным более важно, чем быть умным.

7. Ожидайте встретить мусор

Вам могут встретиться функции, а может, и целые файлы, которые никогда не используются. Вы можете встретить закомментированный код, который простоял нетронутым несколько лет ( git blame в помощь). Не тратьте на это слишком много времени, и не бойтесь избавляться от подобных артефактов.

Если этот код был нужен, кто-нибудь отметит это на код-ревью. А вы сделаете доброе дело, уменьшив количество умственной нагрузки для следующего, кто будет читать этот код.

8. Не отчаивайтесь

Держите предыдущие пункты в голове, и не падайте духом, если чувствуете, что совершенно запутались. Изучение кода — это не линейный процесс, не ожидайте сразу понять все на 100%. Обращайте внимание на важные детали и знайте, как копать, чтобы найти ответы на вопросы, и вы довольно быстро обнаружите, что все становится понятно.

Автор: Уильям Шон, консультант и разработчик в Ann Arbor. Оригинал здесь.

Веб-страница, которую вы читаете, состоит, среди прочего, из исходного кода. Это информация, которую ваш веб-браузер загружает и преобразует в то, что вы сейчас читаете.

Большинство веб-браузеров предоставляют возможность просматривать исходный код веб-страницы без дополнительного программного обеспечения, независимо от того, на каком устройстве вы находитесь. Некоторые даже предлагают расширенные функциональные возможности и структуру, облегчая просмотр HTML и другого программного кода на странице.

Зачем нужен исходный код

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

Вы также можете быть новичком, пытаетесь научиться кодировать свои собственные страницы и ищите примеры из реальной жизни. Конечно, возможно, что вы не попадаете ни в одну из этих категорий и просто хотите просмотреть исходный код из чистого любопытства.

Ниже приведены инструкции по просмотру исходного кода в выбранном вами браузере.

Исходный код страницы в Google Chrome

Настольная версия Chrome предлагает три различных способа просмотра исходного кода страницы, первый и самый простой с использованием следующей комбинации клавиш быстрого доступа: CTRL + U ( COMMAND + OPTION + U в macOS).

Третий метод заключается в использовании инструментов разработчика Chrome, которые позволяют вам глубже погрузиться в код страницы, а также настроить её на лету для целей тестирования и разработки. Интерфейс инструментов разработчика можно открывать и закрывать с помощью сочетания клавиш: CTRL + SHIFT + I ( COMMAND + OPTION + I в macOS).

Вы также можете запустить их по следующему пути:

Google Chrome на Android

Просмотр источника веб-страницы в Chrome для Android также просто: добавьте следующий текст перед адресом (или URL) – view-source:. HTML и другой код рассматриваемой страницы будет немедленно отображаться в активном окне.

Google Chrome на iOS

Хотя нет собственных методов просмотра исходного кода с помощью Chrome на iPad, iPhone или iPod touch, наиболее простым и эффективным является использование стороннего решения, такого как приложение View Source.

Доступное за $0,99 в App Store, View Source предлагает вам ввести URL-адрес страницы (или скопировать/вставить его из адресной строки Chrome), и всё. Помимо отображения HTML и другого исходного кода, в приложении также есть вкладки, на которых отображаются отдельные ресурсы страницы, объектная модель документа (DOM), а также размер страницы, файлы cookie и другие интересные сведения.

Исходный код страницы в Microsoft Edge

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

После первого запуска инструментов разработчика Edge добавляет в контекстное меню браузера две дополнительные опции (доступные по щелчку правой кнопкой мыши в любом месте веб-страницы): Проверить элемент и Просмотреть источник, последний из которых открывает интерфейс инструментов разработчика с исходным кодом страницы сайта.

Исходный код страницы в Mozilla Firefox

Чтобы просмотреть исходный код страницы в настольной версии Firefox, вы можете нажать CTRL + U ( COMMAND + U на macOS) на клавиатуре, чтобы открыть новую вкладку, содержащую HTML и другой код для активной веб-страницы.

Ещё один способ получить доступ к исходному коду страницы – воспользоваться инструментами разработчика Firefox, доступными с помощью следующих шагов.

Firefox также позволяет вам просматривать исходный код для определенной части страницы, что позволяет легко выявлять проблемы. Для этого сначала выделите интересующую область мышью. Затем щелкните правой кнопкой мыши и выберите Исходный код выделенного фрагмента из контекстного меню браузера.

Mozilla Firefox на Android

Просмотр исходного кода в Android версии Firefox достижим через использование view-source: в URL-адресе.

Mozilla Firefox на iOS

Рекомендуемый метод просмотра исходного кода веб-страницы на вашем iPad, iPhone или iPod touch – через приложение View Source, доступное в App Store за $0,99. Хотя оно не интегрировано напрямую с Firefox, вы можете легко скопировать и вставить URL-адрес из браузера в приложение, чтобы раскрыть HTML-код и другой код, связанный с рассматриваемой страницей.

Исходный код страницы в Apple Safari

Хотя Safari для iOS по умолчанию не включает возможность просмотра источника страницы, браузер довольно легко интегрируется с приложением View Source, доступным в App Store за 0,99 долл. США.

Теперь должно отображаться структурированное представление с цветовой кодировкой исходного кода активной страницы вместе с другими вкладками, которые позволяют просматривать ресурсы страницы, сценарии и многое другое.

На MacOS

Исходный код страницы в браузере Opera

Чтобы просмотреть исходный код активной веб-страницы в браузере Opera, используйте следующую комбинацию клавиш: CTRL + U ( COMMAND + OPTION + U в macOS). Если вы предпочитаете загружать источник в текущей вкладке, введите следующий текст слева от URL-адреса страницы в адресной строке и нажмите Enter : view-source:

Настольная версия Opera также позволяет просматривать исходный код HTML, CSS и другие элементы с помощью встроенных инструментов разработчика. Чтобы запустить этот интерфейс, который по умолчанию будет отображаться в правой части главного окна браузера, нажмите следующую комбинацию клавиш: CTRL + SHIFT + I ( COMMAND + OPTION + I в macOS).

Исходный код в браузере Vivaldi

Существует несколько способов просмотра исходного кода в браузере Vivaldi. Самое простое – это сочетание клавиш CTRL + U , которое представляет код с активной страницы в новой вкладке.

Вы также можете добавить следующий текст в начало URL-адреса страницы, который отображает исходный код на текущей вкладке: view-source:

Другой метод – через интегрированные инструменты разработчика браузера, доступные по сочетанию клавиш CTRL + SHIFT + I или через опцию средств разработчика в меню.

Читайте также: