# Ручной поиск CSS-селекторов в браузере

Если автоматически созданный инструментом записи селектор оказался не оптимальным, Пользователь может вручную отредактировать код. Для этого следует открыть исходный код элемента на веб-странице. Это можно сделать с помощью "Инструментов разработчика" ("Developer Tools") браузера, после чего самостоятельно подобрать подходящий в данной ситуации селектор.

Например, в Google Chrome перейти к "Developer Tools" можно двумя способами:

* в основном меню выбрать More Tools -> Developer Tools,
* нажать на клавиши Ctrl+Shift+I.

В появившейся панели "Developer Tools" исходный код веб-страницы будет отображаться на вкладке "Elements". Также можно быстро открыть этот инструмент и перейти к коду элемента управления, если на веб-странице кликнуть на нужный элемент правой кнопкой мыши и выбрать пункт контекстного меню "Inspect". В данном случае, Пользователь сразу увидит ту часть кода, которая соответствующий нужному элементу, так как она будет подсвечена на вкладке "Elements" в "Developer Tools".

Некоторые веб-страницы блокируют обычное контекстное меню браузера и вместо него показывают своё собственное меню при правом клике. Иногда клик по элементу меняет его состояние так, что исчезает нужный атрибут. Например, чтобы записать селектор для непрочитанного сообщения в мессенджере, правый клик по нему может пометить сообщение как прочитанное, и его код в "Inspect" изменится. Чтобы увидеть исходный код элемента в обоих случаях, используйте иконку "Select Element" (в Google Chrome она самая первая на панели):

<figure><img src="https://483167589-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FpyvTUnAaOD3OMZ1w2jM6%2Fuploads%2FNdLXOWxRzzIJbbKBGDmB%2F2025-07-21_18-45-57.png?alt=media&#x26;token=bf817391-ab3b-43cd-be5a-d018f453239d" alt=""><figcaption></figcaption></figure>

В других браузерах (Edge, Firefox и т.д.) инструмент "Developer Tools" выглядит и работает схожим образом, но конкретные названия пунктов меню (и комбинации клавиш для его вызова) могут отличаться от примера выше.

Современные веб-страницы очень динамичны. Они могут менять свои элементы, названия, порядок и внешний вид даже после загрузки с сервера и кеширования в браузере. Также страницы часто подгружаются по частям, с помощью фреймов или динамически изменяют структуру — это называется DOM (модель страницы в виде дерева тегов). Технологии, такие как Ajax, позволяют обновлять части страницы без необходимости её полностью перезагружать.

Чтобы увидеть исходный HTML-код страницы сразу после загрузки, можно выбрать в меню браузера пункт "View page source". Но для автоматизации это не обязательно, потому что страница за время работы меняется.

Когда используются "Developer Tools" браузера, по сути отображается обновляемая в реальном времени структура DOM. Поэтому для поиска элементов лучше пользоваться именно этим динамическим отображением, а не исходным исходным кодом страницы.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.sherparpa.ru/sherpa-rpa/sherpa-designer/rabota-v-sherpa-designer/rukovodstvo-po-veb-selektoram/ruchnoi-poisk-css-selektorov-v-brauzere.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.