Просмотр исходного кода страницы так, как это делают поисковые системы | Центр Поддержки

Сайты Wix используют рендеринг на стороне сервера (SSR) для преобразования HTML-кода страниц вашего сайта в ту версию, которую видят посетители в своих браузерах. 

SSR также может помочь поисковым системам получить весь контент ваших страниц во время сканирования и индексации. Это, кроме прочего, относится и к контенту, полезному для поисковой оптимизации (SEO), такому как метатеги. Метатеги содержатся в исходном коде вашей страницы, но не видны пользователям.

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

Содержание:

• Просмотр исходного кода страницы в Google Chrome
• Просмотр исходного кода страницы в Safari

Просмотр исходного кода страницы в Google Chrome

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

Для просмотра страницы в Google Chrome:

1. Откройте нужную страницу вашего сайта в Google Chrome.
2. Откройте просмотр исходного кода страницы:
   • Windows: нажмите на страницу правой кнопкой мыши и выберите Просмотр кода страницы (или Исходный код страницы).
   • Mac: нажмите Cmd + Option + U на клавиатуре.
3. Откройте инструменты разработчика:
   • Windows: нажмите клавишу F12 на клавиатуре.
   • Mac: нажмите Cmd + Option + I на клавиатуре.
4. Нажмите на значок Настройка и управление DevTools вверху справа. 
5. Наведите курсор на Дополнительные инструменты и выберите Условия работы сети. 

1. Снимите флажок Использовать настройки браузера по умолчанию в разделе Агент пользователя.  
2. Выберите Googlebot из раскрывающегося меню. 

1. Обновите страницу.

Просмотр исходного кода страницы в Safari

Вы можете использовать вкладку Разработка в Safari, чтобы просмотреть код страницы так, как это делают поисковые системы. 

Для просмотра страницы в Safari:

1. Нажмите Safari в верхнем меню.
2. Выберите Настройки.
3. Выберите Дополнительно.
4. Установите флажок Показать меню разработки в строке меню. 

1. Закройте всплывающее окно «Настройки».
2. Откройте нужную страницу сайта в Safari.
3. Нажмите Cmd + Option + U, чтобы открыть просмотр исходного кода страницы.
4. Нажмите Разработка в верхнем меню. 
5. Наведите курсор на Пользовательский агент.
6. Выберите Другой.
7. Замените текст в поле следующим: Mozilla/5.0 AppleWebKit/537.36 (KHTML, like Gecko; compatible; Googlebot/2.1; +http://www.google.com/bot.html) Safari/537.36
8. Нажмите ОК для подтверждения.

Hужна помощь с поисковой оптимизацией?

Нанять специалиста

Яндекс, Chrome, Firefox, Opera, Edge

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

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

В этой статье мы рассмотрим способы посмотреть код страницы сайта в самых популярных браузерах:  Яндекс, Google Chrome, Firefox, Opera и Microsoft Edge.

Обратите внимание:

Если вы хотите самостоятельно разбираться в коде, при этом не только в коде веб-страниц сайта, рекомендуем видео курс C# 8.0 — https://itvdn.com/ru/video/procedural-programming-csharp. Курс подойдет, в том числе, тем, кто никогда не занимался программированием, но хочет обучиться полезному навыку.

Оглавление

Как посмотреть код страницы в Яндекс Браузере

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

Чтобы посмотреть код страницы в Яндекс Браузере, откройте нужную страницу сайта и нажмите сочетание клавиш Ctrl+U. Другой вариант — нажать правой кнопкой мыши в любом месте и выбрать пункт “Просмотреть код страницы”.

После этого откроется исходный код страницы сайта.

Можно просмотреть и код отдельного элемента или нескольких элементов. Для этого наведите на нужный элемент, нажмите правой кнопкой мыши на него и выберите пункт “Исследовать элемент”.

Обратите внимание:

Можно вызвать консоль просмотра кода элементов при помощи комбинации Ctrl+Shift+I.

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

Обратите внимание:

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

Как посмотреть код страницы в Google Chrome

Яндекс Браузер сделан на базе Chromium — это единая платформа для многих браузеров, которая используется и в Google Chrome. От того и способы посмотреть код страницы в Google Chrome не отличаются от Яндекс Браузера.

Чтобы посмотреть код страницы в Google Chrome, нажмите Ctrl+U или правой кнопкой в любом месте, а потом “Просмотр кода страницы”.

Код отдельного элемента на странице можно просмотреть, если навести на него мышь, нажать правой кнопкой и выбрать “Просмотреть код”.

Обратите внимание:

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

Как посмотреть код страницы в Firefox

В браузере Firefox (известный как Mozilla) можно посмотреть код страницы двумя способами.

Если нужно исследовать отдельный элемент, нажмите правой кнопкой мыши на нужный элемент на страницы и выберите “Исследовать”. Снизу (по умолчанию) откроется “Инспектор”, который дает возможность смотреть код страницы.

Обратите внимание:

Вызвать панель “Инспектора” можно при помощи комбинации клавиш Ctrl+Shift+I.

Полный код страницы можно посмотреть, если нажать сочетание клавиш Ctrl+U. В таком случае код страницы будет открыт в новой вкладке браузера.

Как посмотреть код страницы в Opera

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

Для просмотра кода всей страницы сайта в Opera, нажмите правой кнопкой мыши в любом месте страницы браузера и выберите “Исходный текст страницы”. Можно просто нажать, как и в других браузерах, сочетание клавиш Ctrl+U.

Просмотреть код отдельного элемента возможно, если на него навести мышь, нажать правой кнопкой и выбрать “Просмотреть код элемента”.

Обратите внимание:

В Opera для вызова административной консоли в браузере используется сочетание клавиш Ctrl+Shift+C.

Как посмотреть код страницы в Edge

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

Обратите внимание:

Последние версии браузера Edge выполняются на базе Chromium.

Чтобы посмотреть код страницы через Microsoft Edge, нажмите правой кнопкой мыши в любом месте страницы и выберите “Просмотреть исходный код”. Либо нажмите Ctrl+U.

Для просмотра кода элемента, нужно нажать правой кнопкой мыши на нужный элемент страницы сайта и выбрать “Проверить”.

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

Устранение неполадок HTML-кода в Google Chrome — что такое Mark Down

Если вам интересно, почему ваш HTML-код , написанный в Блокноте, не отображается должным образом в Google Chrome, есть несколько возможных объяснений. Одна из возможностей заключается в том, что вы не сохраняете свой файл с расширением «.html», которое необходимо для Chrome (и других браузеров), чтобы распознать его как файл HTML. Другая возможность заключается в том, что ваш код имеет неправильный формат и содержит ошибки, которые могут помешать его правильному отображению. Если у вас все еще возникают проблемы, в Интернете доступно множество ресурсов, которые могут помочь вам устранить неполадки в коде. Приложив немного терпения и усилий, вы сможете добиться правильного отображения HTML-кода в Chrome в кратчайшие сроки.

Набрав data:text/html, html contenteditable или в омнибаре, вы можете получить доступ к блокноту. У вас могут возникнуть проблемы с запоминанием доступа к блокноту на регулярной основе, но вы можете добавить его в свои закладки, чтобы сделать его более доступным каждый раз.

Как просмотреть HTML-код в Блокноте Chrome?

Источник изображения: https://blogspot.com

Для просмотра HTML в Блокноте Chrome вам необходимо открыть HTML-файл в текстовом редакторе, например Notepad++. Затем вы можете использовать опцию «Просмотр исходного кода» в меню Chrome для просмотра HTML-кода.

Теперь Chrome можно использовать как блокнот. Скопируйте и вставьте следующую строку кода в адресную строку вашего браузера. Нажав на пустое окно вкладки, вы можете начать печатать. Этот совет изначально был дан Хосе Хесус Перес Агинага, разработчику Javascript и веб-разработчику. Эта система работает и будет работать. Писать в качестве студента, исследователя или писателя не будет для вас отвлечением. Нет необходимости устанавливать или запускать другое приложение для использования плагина. Недостатком является то, что если вы закроете вкладку, все ваши заметки будут потеряны. Однако, если вам нужны эти заметки, вы можете сохранить их прямо перед закрытием вкладки.

В этой статье мы рассмотрим, как использовать расширение «Открыть в браузере» в Visual Studio Code. Мы можем использовать это расширение для открытия файлов в браузере по умолчанию на нашем компьютере, а не в редакторе. Если нам нужно предварительно просмотреть файл перед его фиксацией в нашем репозитории кода, мы можем использовать эту функцию. Чтобы получить доступ к индексу, мы будем использовать расширение «Открыть в браузере». В предыдущей статье мы описали html файл. Первым шагом в установке открытого в браузере расширения является доступ к разделу «Расширения» нашего редактора кода Visual Studio. Самый простой способ сделать это — найти его с помощью кнопки «Расширения» на крайней левой вертикальной панели инструментов, а затем выбрать «открыть в браузере». После установки расширения мы можем использовать его для открытия файла index. Этот файл HTML-страница . Для начала мы должны сначала выбрать файл, который мы хотим открыть. Если вы хотите начать, просто выберите «Открыть» в меню «Файл». Затем можно выбрать файл, который мы хотим открыть. После того, как мы выбрали файл, кнопку «Открыть в браузере» можно найти на крайней левой вертикальной панели инструментов. Доступ к файлу можно будет получить, нажав кнопку «Открыть» в браузере по умолчанию.

Как открывать HTML-файлы в Chrome

Chrome поддерживает различные методы открытия HTML-файлов . Вы можете сохранить файл на свой компьютер, щелкнув его правой кнопкой мыши и выбрав в меню «Открыть с помощью Chrome». Другой вариант — перейти к файлу по его URL-адресу [/], который откроет файл непосредственно в Chrome. Возможно, права доступа к файлу не позволяют открыть файл. Содержание сообщества может быть устаревшим или непроверенным.

Почему мой HTML-код не открывается в Chrome?

Источник изображения: https://helpdeskgeek.com

Может быть несколько причин, по которым ваш HTML-код не открывается в Chrome. Одной из причин может быть неправильный путь к файлу, и Chrome не может найти файл. Другой причиной может быть то, что файл не сохранен как файл HTML.

HTML, или язык разметки гипертекста, — это язык сценариев, работающий в Интернете. Он в основном используется для создания и структурирования веб-страниц. HTML теперь можно открыть в Google Chrome с расширением, которое соответствует его расширению, что позволяет вам создать персонализированную веб-страницу HTML . Chrome позволяет открывать HTML-файл различными способами. В Chrome вы можете получить доступ к исходному коду HTML-файла, щелкнув его на новой вкладке. В зависимости от того, какую версию Chrome вы используете, вы можете сделать это разными способами. Помимо изучения исходного кода веб-страницы, можно понять, как изменения на странице влияют на нее.

Пользователи Chrome: убедитесь, что у вас установлена ​​последняя версия

Убедитесь, что у вас установлена ​​самая последняя версия Chrome и что файл сохранен в формате UTF-8. Если это не сработает, вам может потребоваться переустановить другой браузер или использовать Edge/Safari/Internet Explorer, который является бесплатным или платным браузером.

Почему мой HTML-код не отображается в браузере?

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

Как включить HTML в браузере?

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

Почему мой HTML-файл не открывается в Chrome?

Невозможно получить доступ к файлу по адресу file:///Users/…/index. html. Возможно, он был удален, перемещен или права доступа к файлу препятствуют доступу к нему. Невозможно проверить или сохранить содержимое сообщества.

Почему HTML не работает?

Установив в редакторе обычный текст, вы можете предотвратить добавление специальных символов в HTML и CSS. Если у вас возникли проблемы, вы можете проверить источник, используя меню «просмотр источника» (в Safari — «Просмотр»). Когда вы это сделаете, вы обычно обнаружите скрытые проблемы, такие как специальные символы, которых вы не видите в своем обычном редакторе.

Как включить HTML в Chrome?

Чтобы включить HTML в Chrome, вам нужно открыть меню настроек и перейти в раздел «Дополнительно». Оттуда вам нужно будет включить « Использовать опцию HTML ».

Как открыть HTML-файл в Chrome из Блокнота

Чтобы открыть HTML-файл в Chrome из Блокнота, сначала откройте файл в Блокноте. Затем перейдите в меню «Файл» и выберите «Сохранить как». В диалоговом окне «Сохранить как» выберите «Все файлы» в раскрывающемся списке «Тип файла». Наконец, измените расширение файла с .txt на .html и нажмите «Сохранить». Теперь файл будет сохранен как файл HTML и откроется в Chrome при двойном щелчке по нему.

Файлы HTML можно создавать, сохранять и затем открывать с помощью Блокнота. Он предварительно загружен вместе с Windows и включает текстовый редактор Notepad. Если вы используете компьютер с Windows, вам не нужно загружать и устанавливать Блокнот. Вы можете использовать его для открытия, редактирования и сохранения всех процессов, которые вы можете использовать с другими редакторами HTML. Этот учебник проведет вас через шаги, необходимые для открытия, создания и сохранения HTML-файлов с помощью Блокнота. Если у вас уже есть файл HTML в любом текстовом редакторе, просто найдите параметр «Файл» в меню «Редакторы», чтобы создать новый файл HTML. Чтобы создать полноценную веб-страницу в формате HTML с помощью программы «Блокнот», вы должны сначала ознакомиться с тегами HTML, абзацами, заголовками, изображениями, элементами div и другими мощными элементами HTML.

Невозможно запускать файлы HTML непосредственно из Блокнота. В результате файл HTML должен быть сохранен первым. Чтобы сохранить HTML-файлы, перейдите по URL-адресу:. Вы должны выбрать меню «Файл». Можно выбрать вариант сохранения из списка. Выберите путь (местоположение, из которого должен быть сохранен HTML-файл), который вы хотите использовать. Дайте вашему файлу имя перед добавлением расширения (например, myfile.html).

После нажатия кнопки Сохранить все готово. Выберите меню «Файл» в верхнем левом углу меню. Нажав «Сохранить параметр», вы можете получить доступ к параметру «Сохранить». Укажите имя файла, а затем расширение (например, myfile.html). После того, как вы успешно создали свой HTML-файл, вам нужно сохранить его. Если вы хотите открыть этот HTML-файл в своем любимом веб-браузере, просто найдите его и нажмите кнопку «Сохранить HTML».

Как открыть исходный код веб-страницы Chrome

Если вы хотите получить прямой доступ к исходному коду веб-страницы Chrome, просмотр исходного кода страницы — это то, что вам нужно. Когда вы нажимаете вкладку «Просмотр источника страницы», открывается новая вкладка, на которую вы можете перейти. View Page Source имеет широкий спектр параметров форматирования, которые позволяют вам получить именно то, что вы ищете. Если вам нужно открыть веб-страницу Chrome на своем компьютере в Блокноте, наше программное расширение «Открыть в Блокноте» может сделать эту работу. Прежде чем вы сможете перезапустить расширение, вы должны сначала обновить все вкладки Chrome и закрыть браузер. В Блокноте щелкните правой кнопкой мыши ссылку, которую хотите открыть, и выберите Открыть из Меню блокнота .

Notepad++ Запустить Html в Chrome

Чтобы открыть или запустить файл HTML в Chrome, мы должны дважды щелкнуть его. Он автоматически запустится в вашем веб-браузере, как только вы его откроете. Если файл не открывается в вашем браузере, выберите «Открыть с помощью» в контекстном меню.

Есть ли способ запустить HTML из Блокнота? Не получится и не получится. Возможно, вы пропустили два рассматриваемых слова, но я удивлен, что вы этого не сделали. Убедитесь, что ярлыки файлов установлены правильно. Я переименовал файл в’в конце. Как я могу узнать, где находятся ярлыки для о.п. веб-страница находится? Для него есть адрес. Да, мы могли бы создать тему для поста об этом, если вам понравится еще одна, но стоит ли это того?

HTML-код не работает в Chrome

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

Как открыть файл блокнота в веб-браузере

Файл блокнота можно открыть в веб-браузере, щелкнув меню «Файл» и выбрав «Открыть». В диалоговом окне «Открыть» выберите файл Блокнота, который вы хотите открыть, и нажмите кнопку «Открыть».

Блокнот — это текстовый редактор, предустановленный во всех версиях Windows, включая XP, Windows 7, Windows 8, Windows 10 и так далее. Блокнот, с другой стороны, представляет собой текстовый редактор, который предоставляет меньше возможностей, чем VS Code или другая программа, работающая в фоновом режиме. В этом уроке я расскажу вам, как использовать Блокнот Windows и как открыть код любой веб-страницы прямо из него. Я не буду беспокоиться, если ваш код не будет выглядеть так же, как мой. Блокнот не делает этого автоматически, поэтому вы должны сделать это вручную. Файлы на шаге 3 были созданы в папке с метками HTML, CSS и JavaScript. Щелкните файл HTML, если вы хотите открыть его в браузере по умолчанию.

После нескольких щелчков мышью веб-сайт должен выглядеть так. Текстовый редактор Windows Notepad похож на S Code, Atom, Sublime Text и другие в том, что это текстовый редактор. Подсветка синтаксиса или функция терминала недоступна в этом приложении. Чтобы научиться писать код более эффективно, загрузите и установите более многофункциональный текстовый редактор, например VS Code (бесплатно).

Открытие текстового файла в Internet Explorer

Нажав кнопку *br в Internet Explorer, вы можете открыть текстовый файл. Internet Explorer можно запустить, щелкнув правой кнопкой мыши страницу и выбрав «Свойства».
Вы можете начать с выбора File из меню File.
Если вы хотите найти место, где вы сохранили текстовый документ, введите его в поле ввода или нажмите кнопку Обзор.

HTML-файл

HTML-файл — это текстовый файл, содержащий небольшие теги разметки. Теги разметки сообщают веб-браузеру, как отображать страницу. Файл HTML должен иметь расширение htm или html .

HTML — это язык разметки, используемый веб-страницами для отображения на вкладках браузера. Содержимое веб-страницы теперь должно включать новые информационные требования как часть HTML-кода, который является языком, известным как Интернет. HTML 5, самый последний вариант языка, обеспечивает большую гибкость в том, как его можно использовать. HTML — это файл, содержащий содержимое страницы, отображаемой браузером. Текст, изображения, цвета, графика и т. д. могут быть включены. В эпоху современных таблиц стилей особое внимание уделялось презентационным характеристикам тела, таким как цвет и текст.

Что такое HTML-файл?

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

Как я могу открыть HTML-файл?

Сохраненный HTML-файл должен быть открыт в вашем любимом браузере (дважды щелкните его или щелкните правой кнопкой мыши и выберите Открыть с помощью).

Как создать HTML-файл? Для этого можно использовать Блокнот

. HTML-файл можно создать в любом текстовом редакторе с его помощью. NotePad — один из таких редакторов, который входит в стандартный процесс установки Windows.

Как обойти структуру каталогов исходного кода Chromium

Chromium разделен на две основные части (за исключением других библиотек): браузер и средство визуализации (включая Blink, веб-движок). Браузер основной процесс и представляет весь пользовательский интерфейс и ввод-вывод. Рендерер (часто) подпроцесс для каждой вкладки, управляемый браузером. Он встраивает Blink, чтобы сделать макет и рендеринг.

Вам захочется прочитать и ознакомиться с нашим многопроцессорным архитектура и как Chromium отображает веб страницы.

При просмотре и поиске кода Chromium или проверить код Chromium вы заметите ряд каталогов верхнего уровня:

• android_webview: Обеспечивает фасад над src/content, подходящий для интеграция с платформой андроид. НЕ предназначен для использования в отдельные приложения для Android (APK). Более информация об организации исходного кода Android WebView.
• приложения : упакованный Chrome Программы.
• основание : Общий код для всех подпроектов. Это содержит такие вещи, как манипуляции со строками, универсальные утилиты и т. д. только в том случае, если он должен быть разделен между несколькими другими высокоуровневыми проект.
• breakpad : проект отчетов Google с открытым исходным кодом. Это взяты непосредственно из репозитория Subversion Google Code.
• сборка : Конфигурация, связанная со сборкой, общая для всех проектов.
• cc : реализация компоновщика Chromium.
• chrome : Браузер Chromium (см. ниже).
• chrome/test/data : файлы данных для запуска определенных тестов.
• компоненты : каталог для компонентов, которые имеют содержимое Модуль как самый верхний слой, от которого они зависят.
• content: Основной код, необходимый для изолированной программной среды с несколькими процессами. браузер (см. ниже). Больше информации о том, почему мы выделили этот код.
• устройство: Кросс-платформенные абстракции общего низкоуровневого оборудования API.
• net : Сетевая библиотека, разработанная для Chromium. Это может быть используется отдельно от Chromium при запуске нашего простого test_shell в репозиторий
  webkit . См. также chrome/common/net .
• песочница : Проект песочницы, который пытается предотвратить взлом renderer от модификации системы.
• skia + Third_Party/skia : Графическая библиотека Google Skia. Наш дополнительные классы в ui/gfx обертывают Skia.
• sql: Наша обертка вокруг sqlite.
• testing : Содержит код Google GTest с открытым исходным кодом, который мы используем. для модульного тестирования.
• Third_Party : более 200 малых и больших «внешних» библиотек, таких как декодеры изображений, библиотеки сжатия и веб-движок Blink (здесь потому что он наследует лицензионные ограничения от WebKit). Добавление новых пакеты.
  • …/blink/renderer : Веб-движок, отвечающий за поворот HTML, CSS и скрипты в команды рисования и другое состояние изменения.
• инструменты
• ui/gfx : Общие классы графики. Они составляют основу Графика пользовательского интерфейса Chromium.
• ui/views : Простая структура для разработки пользовательского интерфейса, предоставляющая рендеринг, компоновка и обработка событий. Большая часть пользовательского интерфейса браузера реализованы в этой системе. Этот каталог содержит базу объекты. Некоторые другие объекты, специфичные для браузера, находятся в хром/браузер/пользовательский интерфейс/представления.
• url : Анализ и канонизация URL-адресов с открытым исходным кодом Google. библиотека.
• v8
  : Библиотека Javascript V8. Это взято непосредственно из Репозиторий Subversion Google Code.

По историческим причинам существует несколько небольших каталогов верхнего уровня. Идущий вперед, руководство состоит в том, что новые каталоги верхнего уровня предназначены для приложений (например, Chrome, Android WebView, Ash). Даже если эти приложения имеют несколько исполняемые файлы, код должен находиться в подкаталогах приложения

Вот немного устаревшая диаграмма зависимостей. В частности, WebKit заменен на blink/renderer. Модуль более низкого уровня не может включать код из более высокий модуль напрямую (т.е. содержимое не может включать заголовок из хрома), но общается с ним с помощью API встраивания.

• браузер : серверная часть приложения, которое обрабатывает все операции ввода-вывода. и связь с дочерними процессами. Это говорит с
  визуализатор для управления веб-страницами.
• общий: Файлы, совместно используемые несколькими процессами (т.е. браузер и рендерер, рендерер и плагин и т. д.). это код характерно для Chromium (и не применимо к нахождению в базе).
• gpu: Код для процесса GPU, который используется для 3D композитинга и 3D API.
• plugin: Код для запуска плагинов браузера в других процессах.
• ppapi_plugin: Код для перца плагин процесс.
• визуализатор : Код подпроцесса на каждой вкладке. Это встраивает WebKit и взаимодействует с браузером для ввода-вывода.
• утилита: Код для запуска случайных операций в песочнице процесс. Процесс браузера использует его, когда хочет запустить операции с недоверенными данными.
• рабочий: Код для запуска HTML5 Web Workers.

• приложение : «Приложение» — это самый базовый уровень программы. Это запущено при запуске и отправляет либо в браузер, либо в код рендерера в зависимости от того, в каких возможностях находится текущий процесс. содержит проекты для chrome.exe и chrome.dll . Вы не будете обычно нужно изменить этот материал, кроме ресурсов, таких как изображения и струны.
  • локали : Проекты для создания локализованных библиотек DLL.
  • ресурсов : Иконки и курсоры.
  • тема : Картинки для темы окна.
• браузер : внешний интерфейс, включая главное окно, пользовательский интерфейс и серверная часть для приложения, которое обрабатывает все операции ввода-вывода и хранения. Этот общается с рендерером для управления веб-страницами.
  • ui модель, вид и код контроллера для функций пользовательского интерфейса и функциональность
• common : Файлы, совместно используемые браузером и визуализатором, которые специфичен для модуля Chrome.
  • net : Некоторые вещи, специфичные для Chromium, поверх net модуль верхнего уровня. Это должно быть объединено с browser/net.
• установщик : Исходные файлы и проекты для создания установщика (пакет MSI).
• средство визуализации : специальный код Chrome, который выполняется в средстве визуализации процесс.
  Это добавляет такие функции Chrome, как автозаполнение, перевод и т. д. модуль содержания.
• тест :
  • автоматизация : Используется тестами для управления пользовательским интерфейсом браузера, для например, в test/ui , test/startup и т. д. Это сообщает с браузером/автоматизацией в браузере.
  • page_cycler : Код для запуска тестов страничного циклера (для Измерение производительности). См. инструменты/перформанс/приборная панель .
  • надежность : Тесты надежности для распределенного тестирования страницы загружаются для показателей надежности и обнаружения сбоев.
  • selenium : код для запуска тестов селена, который представляет собой сторонний тестовый набор для Ajaxy и JavaScript. Видеть тест/сторонняя_сторона/selenium_core .
  • запуск : Тесты для измерения производительности запуска. Видеть tools/perf/dashboard и tools/test/reference_build .
  • ui : тесты пользовательского интерфейса для тыкания в пользовательский интерфейс браузера, открытия вкладок, и т. д. Он использует тест /автоматизацию для выполнения большинства операций.
  • unit : Базовый код для модульных тестов. Тестовый код для отдельные тесты обычно находятся рядом с тестируемым кодом в файле *_unittest.cc .
• Third_Party : Библиотеки сторонних производителей, специфичные для Хром. Некоторые другие сторонние библиотеки находятся на верхнем уровне. сторонняя библиотека .
• инструменты
  • build : Инструменты и случайные вещи, связанные со строительством.
  • память : Инструменты для памяти. В настоящее время включает gflags для настройки параметров кучи страниц.
  • perf/dashboard : Код для преобразования журналов производительности (для пример test/startup_test ) в данные и графики.
  • профилей : Генератор случайных данных истории. Используется для изготовления тестовые профили.

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

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

Читать самую важную документацию разработчиков

многопроцессорная архитектура

отображение веб-страницы в Chrome

межпроцессное взаимодействие

резьба

Посмотрите, есть ли у вашей группы документы по запуску

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

Изучите некоторые идиомы кода:

важные-абстракции-и-структуры данных

умные указатели-руководящие указания

использование хромированной струны

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

Научитесь пользоваться поиском по коду (или вашим любимым инструментом для просмотра кода)

Узнайте у кого спросить как работает код подсказки здесь.

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

Посмотрите на различия в том, что вам нужно понять, и вы в настоящее время понимать. Например, если ваша группа много занимается программированием графического интерфейса, то возможно, вы можете потратить время на изучение программирования на GTK+, Win32 или Cocoa.

Используйте source.chromium.org для поиска источника код. Это может быть особенно полезно, если код перемещается, а наши документация уже не соответствует действительности.

Имеется дополнительная информация и примеры того, как Chromium отображает веб-страницы. страницы.

1. Наша функция WinMain находится в chrome/app/main.cc и связана в проект хром .
2. WinMain запускает клиент обновлений Google, который установщик/автообновитель. Он найдет подкаталог для текущего версию и загрузить chrome.dll оттуда.
3. Он вызывает ChromeMain во вновь загруженной библиотеке, которая находится в chrome_main. cc в проекте chrome_dll .
4. ChromeMain выполняет инициализацию общих компонентов, а затем пересылает либо RendererMain в chrome/renderer/renderer_main.cc , если флаг командной строки указывает, что это должен быть подпроцесс, или BrowserMain в хром/браузер/browser_main.cc , если не загружать новую копию приложение. Поскольку это запуск, мы запускаем браузер.
5. BrowserMain выполняет обычную инициализацию браузера. Он отличается режимы запуска установленных веб-приложений, подключение к автоматике система, если браузер тестируется и т. д.
6. Он вызывает LaunchWithProfile в browser_init.cc , который создает новый объект Browser в chrome/browser/ui/browser.cc . Этот объект инкапсулирует одно окно верхнего уровня в приложении. Первая вкладка дополняется в настоящее время.

1. BrowserImpl::AddTab в weblayer/browser/browser_impl. cc есть вызывается для добавления новой вкладки.
2. Будет создан новый объект TabContents из браузер/tab_contents/tab_contents.cc
3. TabContents создает RenderViewHost ( chrome/browser/renderer_host/render_view_host.cc ) через Функция инициализации RenderViewHostManager в хром/браузер/tab_contents/render_view_host_manager.cc ). В зависимости от SiteInstance RenderViewHost либо порождает новый процесс визуализации или повторно использует существующий RenderProcessHost . RenderProcessHost — это объект в браузере, представляющий один подпроцесс рендерера.
4. Навигационный контроллер в chrome/browser/tab_contents/navigation_controller.cc , который принадлежащий содержимому вкладки, получает указание перейти по URL-адресу для новая вкладка в NavigationController::LoadURL . «Навигация от Строка URL» начиная с шага 3 описывает, что происходит с этого момента.

1. Когда пользователь вводит или принимает запись в адресной строке, поле редактирования автозаполнения определяет конечный целевой URL и передает что до AutocompleteEdit::OpenURL . (Это может быть не совсем то, что пользователь набрал — например, URL-адрес генерируется в случае поисковый запрос.)
2. Контроллер навигации получил указание перейти к URL-адресу в NavigationController::LoadURL .
3. NavigationController вызывает TabContents::Navigate с NavigationEntry он создан для представления этой конкретной страницы переход. При необходимости он создаст новый RenderViewHost , что приведет к созданию RenderView в процессе визуализации. RenderView не будет существовать, если это первая навигация или если произошел сбой рендерера, поэтому он также будет восстанавливаться после сбоев.
4. Перейти вперед к RenderViewHost::NavigateToEntry . NavigationController сохраняет эту навигационную запись, но она помечен как «ожидающий», потому что он не знает наверняка, произойдет переход (возможно, хост не может быть разрешен).
5. RenderViewHost::NavigateToEntry отправляет ViewMsg_Navigate в новый RenderView в процессе визуализации.
6. Когда предлагается перейти, RenderView может пройти, может выйти из строя или вместо этого может перейти в другое место (например, если пользователь нажмет ссылка). RenderViewHost ожидает ViewHostMsg_FrameNavigate из RenderView .
7. Когда загрузка «зафиксирована» WebKit (сервер ответил и отправка нам данных), RenderView отправляет это сообщение, которое обрабатывается в RenderViewHost::OnMsgNavigate .
8. NavigationEntry обновляется информацией о загрузке. В случае перехода по ссылке браузер никогда не видел этот URL до. Если навигация была инициирована браузером, как при запуске случае, возможно, были перенаправления, которые изменили URL-адрес.
9. NavigationController обновляет свой список переходов на учитывать эту новую информацию.

Каждый NavigationEntry хранит идентификатор страницы и блок данных состояния истории. идентификатор страницы используется для уникальной идентификации загрузки страницы, поэтому мы знаем, какой NavigationEntry соответствует. Он назначается, когда страница фиксируется commit, поэтому ожидающий NavigationEntry будет иметь идентификатор страницы -1. История данные о состоянии просто WebCore::HistoryItem сериализуется в строку. Включено в этом элементе такие вещи, как URL-адрес страницы, URL-адреса подкадра и данные формы.

1. Когда браузер инициирует запрос (ввод в строку URL или нажав назад/вперед/перезагрузить)
   1. WebRequest представляет навигацию вместе с дополнительная информация, такая как идентификатор страницы для бухгалтерского учета. Новый навигации имеют идентификатор -1. Навигация к старым записям идентификатор, присвоенный NavigationEntry , когда страница была первой посетил. Эта дополнительная информация будет запрошена позже, когда загрузка коммитов.
   2. Основной WebFrame получает указание загрузить новый запрос.
2. Когда средство визуализации инициирует запрос (пользователь щелкает ссылку, javascript меняет местоположение и т. д.):
   1. WebCore::FrameLoader предлагается загрузить запрос через один из его миллиарды различных методов загрузки.
3. В любом случае, когда получен первый пакет с сервера, загрузка зафиксирована (больше не «ожидающая» или «предварительная»).
4. Если это была новая навигация, WebCore создаст новую HistoryItem и добавьте его в BackForwardList , WebCore сорт. Таким образом, мы можем различать, какие навигации являются новыми, и которые являются навигацией истории сеанса.