Как инспектировать код в выпадающих меню?

Question

[Владимир Коротенко]

Подкиньте идей как в инспекторе кода (F12) просматривать код css классов для динамических меню и для селекторов :hover.
Меню просто скрывается. Если важно то это страница отчетов в SSRS выпадающее меню выбора формата.

Немного дополню. Основная идея была изменить это выпадающее меню, т.н. "SharePoint branding".

Приведу полученный код, что бы в будущем не мучились.

<div class="ms-core-menu-box ms-core-menu-hasIcons ms-core-defaultFont ms-shadow" role="menu" title="" dir="ltr" contenteditable="false" style="top: 52px; position: absolute; visibility: visible; left: 4px; width: 250px;" flipped="false"><ul class="ms-core-menu-list"><li type="option" onmenuclick="STSNavigate2(event,'http://sharepoint2016/sites/portal/_layouts/15/ReportServer/RSAction.aspx?RSAction=ReportBuilderViewer&amp;ReportPath=http%3a%2f%2fsharepoint2016%2fsites%2fportal%2fLib%2f05+%d0%93%d0%b5%d0%be%d0%bb%d0%be%d0%b3%d0%b8%d1%87%d0%b5%d1%81%d0%ba%d0%b8%d0%b5+%d0%be%d0%b1%d1%8a%d0%b5%d0%ba%d1%82%d1%8b%2f05_01_FondStructure.rdl');" text="Открыть в построителе отчетов" callbackitem="true" menugroupid="2147483647" enabled="true" checked="false" onmenuclick_original="STSNavigate2(event,'http://sharepoint2016/sites/portal/_layouts/15/ReportServer/RSAction.aspx?RSAction=ReportBuilderViewer&amp;ReportPath=http%3a%2f%2fsharepoint2016%2fsites%2fportal%2fLib%2f05+%d0%93%d0%b5%d0%be%d0%bb%d0%be%d0%b3%d0%b8%d1%87%d0%b5%d1%81%d0%ba%d0%b8%d0%b5+%d0%be%d0%b1%d1%8a%d0%b5%d0%ba%d1%82%d1%8b%2f05_01_FondStructure.rdl');" text_original="Открыть в построителе отчетов" valorig="
" id="mp1_0_0" class="ms-core-menu-item   ms-core-menu-itemSelected"><a class="ms-core-menu-link" id="mp1_0_0_Anchor" href="javascript:;" onclick="return false;" title="Открыть в построителе отчетов"><div class="ms-core-menu-icon"></div><div class="ms-core-menu-label" id="m_sqlRsWebPart_RSWebPartToolbar_ctl00_RptControls_RSActionMenu_ReportBuilder_forRendering"><span class="ms-core-menu-title">Открыть в построителе отчетов</span><span></span></div><span class="ms-accessible"></span><div></div></a></li><li type="option" text="Новое предупреждение данных" callbackitem="true" menugroupid="2147483647" enabled="false" text_original="Новое предупреждение данных" valorig="
" id="mp1_0_1" class="ms-core-menu-item ms-core-menu-itemDisabled"><a class="ms-core-menu-link" id="mp1_0_1_Anchor" href="javascript:;" onclick="return false;" aria-disabled="true" title="Новое предупреждение данных"><div class="ms-core-menu-icon"></div><div class="ms-core-menu-label" id="m_sqlRsWebPart_RSWebPartToolbar_ctl00_RptControls_RSActionMenu_DataAlert_forRendering"><span class="ms-accessible ms-core-menu-disabledText">Отключено</span><span class="ms-core-menu-title">Новое предупреждение данных</span><span></span></div><span class="ms-accessible"></span><div></div></a></li><li type="option" text="Подписка" callbackitem="true" menugroupid="2147483647" enabled="false" text_original="Подписка" valorig="
" id="mp1_0_2" class="ms-core-menu-item ms-core-menu-itemDisabled"><a class="ms-core-menu-link" id="mp1_0_2_Anchor" href="javascript:;" onclick="return false;" aria-disabled="true" title="Подписка"><div class="ms-core-menu-icon"></div><div class="ms-core-menu-label" id="m_sqlRsWebPart_RSWebPartToolbar_ctl00_RptControls_RSActionMenu_Subscribe_forRendering"><span class="ms-accessible ms-core-menu-disabledText">Отключено</span><span class="ms-core-menu-title">Подписка</span><span></span></div><span class="ms-accessible"></span><div></div></a></li><li type="option" onmenuclick="$find('m_sqlRsWebPart_ctl00_ReportViewer').invokePrintDialog();" text="Печать" callbackitem="true" menugroupid="2147483647" enabled="true" checked="false" onmenuclick_original="$find('m_sqlRsWebPart_ctl00_ReportViewer').invokePrintDialog();" text_original="Печать" valorig="
" id="mp1_0_3" class="ms-core-menu-item"><a class="ms-core-menu-link" id="mp1_0_3_Anchor" href="javascript:;" onclick="return false;" title="Печать"><div class="ms-core-menu-icon"></div><div class="ms-core-menu-label" id="m_sqlRsWebPart_RSWebPartToolbar_ctl00_RptControls_RSActionMenu_Print_forRendering"><span class="ms-core-menu-title">Печать</span><span></span></div><span class="ms-accessible"></span><div></div></a></li><li type="submenu" text="Экспорт" callbackitem="true" id="mp1_0_4" class="ms-core-menu-item ms-core-menu-hasArrow"><a class="ms-core-menu-link" id="mp1_0_4_Anchor" href="javascript:;" onclick="return false;" title="Экспорт"><div class="ms-core-menu-icon"></div><div class="ms-core-menu-label" id="m_sqlRsWebPart_RSWebPartToolbar_ctl00_RptControls_RSActionMenu_Export"><span class="ms-core-menu-title">Экспорт</span><span></span></div><span class="ms-accessible"></span><div class="ms-core-menu-arrowBox"><img class="ms-core-menu-arrow" src="/_layouts/15/images/MArr.gif" alt="Подменю" title=""></div></a></li></ul></div>

Answer 1

[Владимир Коротенко]

В общем решение устроившее меня нашлось.

1. открыть инспектор кода F12
2. В консоли ввести код setTimeout(function(){debugger;}, 5000)
3. За 5 секунд успеть открыть нужный элемент
4. Дождаться когда высветится окно отладчика
5. Выбрать нужный элемент селектором

Answer 2

[Александр]

Comments

[Владимир Коротенко]

К сожалению, не все так просто.
Меню создается динамически в скрипте на onclick. И эту панельку сложно зафиксировать.

Answer 3

[profesor08]

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

Comments

[Владимир Коротенко]

Попробовал ваш совет. Не вышло, там куча обвязки JS в том числе и таймеры на сокрытие меню, и запрет ПКМ.

[profesor08]

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

[Владимир Коротенко]

profesor08, Код меню генерируется на лету. Плюс ~4000 стилей, там все интересно.
Я исправил вопрос, сейчас более менее понятно будет как разобраться.

Answer 4

[Shim2488]

Скомбинировав коментарии выше вот мое решение:
1. Открываем DevTools
2. Наводим на элемент , при наведении на который выпадает меню, меню - выпадает
3. Инспектируем выпавшее меню Ctrl+Shift+C
4. Нажимаем на меню правой кнопкой, активируя браузерное меню
5. Спускаемся в окно инспектора(выпавшее браузерное меню, не даст закрыться выпадающему меню)
6. Копируем в разметке элемент, выпадающего меню, я нажимал на Copy->Copy Element клавиатурой, без использования мыши, т.к. меню пропадало, при попадании мыши на страницу
7. В нужном месте вставляем элемент, аналогично вставлял клавиатурой, чтобы не закрыть выпадающее меню.

Все теперь, можно перейти на страницу и инспектировать любой элемент меню, оно не закроется