Chrome 개발자 도구에서 마우스 오버 상태를 참조하세요

Chrome 개발자 도구에서 마우스 오버 상태를 참조하세요

---

:hoverChrome에서 가리키고있는 앵커 의 스타일 을보고 싶습니다 . Firebug에는 요소에 대해 다른 상태를 선택할 수있는 스타일 드롭 다운이 있습니다. Chrome에서 비슷한 것을 찾을 수 없습니다. 내가 뭔가를 놓치고 있습니까?

---

이제 가상 클래스 규칙을 모두보고 요소에 적용 할 수 있습니다.

:hover스타일 창에서 와 같은 규칙을 보려면 :hov오른쪽 상단 의 작은 텍스트를 클릭합니다 .

요소를 :hover상태 로 강제하려면 마우스 오른쪽 단추를 클릭하십시오.

온 추가 팁 요소 패널 의 크롬 개발자 도구 바로 가기 .

---

편집 :이 답변은 버그 수정 이전이었습니다 .tnothcutt의 답변을 참조하십시오.

이것은 약간 까다로 웠지만 여기에 있습니다.

• 요소를 마우스 오른쪽 버튼으로 클릭하되 요소에서 멀리 마우스 포인터를 이동하지 말고 호버 상태로 유지하십시오.
• 위쪽 화살표를 누른 다음 Enter 키를 누른 다음 키보드를 통해 검사 요소를 선택합니다.
• Matched CSS Rules 아래의 개발자 도구를 보면 : hover를 볼 수 있습니다.

추신 : 질문 태그 중 하나에 이것을 시도했습니다.

---

내 부트 스트랩 툴팁에서 호버 상태를보고 싶었습니다. Chrome 개발 도구에서 : hover 상태를 강제 실행해도 필요한 출력이 생성되지 않았지만 콘솔을 통해 mouseenter 이벤트를 트리거하면 Chrome에서 트릭을 수행했습니다. 페이지에 jQuery가 있으면 다음을 실행할 수 있습니다.

$('.YOUR-TOOL-TIP-CLASS').trigger('mouseenter');

---

Chrome 개발자 도구에서 HOVER STATE 스타일 을 보는 방법에는 여러 가지가 있습니다 .

방법 01

방법 02

Firefox 기본 개발자 요금

Firebug와 함께

---

도움이되는 경우 최신 Chrome (47.0.2526.106)에서 더 쉬운 것 같습니다.

Inspect element and then click on the three white dots in the left gutter:

Then choose the desired element state from this dropdown:

---

I don't think there is a way to do this. I submitted a feature request. If there is a way, the developers at Google will surly point it out and I will edit my answer. If not, we will have to wait and watch. (you can star the issue to vote for it)

---

Comment 1 by Chrome project member: In 10.0.620.0, the Styles panel shows the :hover styles for the selected element but not :active.

---

(as of this post) Current Stable channel version is 8.0.552.224.

You can replace your Stable channel installation of Google Chrome with the Beta channel or the Dev channel (See Early Access Release Channels).

You can also install a secondary installation of chrome that is even more up to date than the Dev channel.

... The Canary build is updated even more frequently than the Dev channel and is not tested before being released. Because the Canary build may at times be unusable, it cannot be set as your default browser and may be installed in addition to any of the above channels of Google Chrome. ...

---

I know that what I do is quite the workaround, however it works perfectly and that is the way I do it everytime.

Then, proceed like this:

• First make sure Chrome Developer Tools is undocked.
• Then, just move any side of the Dev Tools window to the middle of the element you want to inspect while hovered.

• Finally, hover the element, right click and inspect element, move your mouse into the Dev Tools window and you will be able to play with your element:hover css.

Cheers!

---

I was debugging a menu hover state with Chrome and did this to be able to see the hover state code:

In the Elements panel click over Toggle Element state button and select :hover.

In the Scripts panel go to Event Listeners Breakpoints in the right bottom section and select Mouse -> mouseup.

Now inspect the Menu and select the box you want. When you release the mouse button it should stop and show you the selected element hover state in the Elements panel (look at the Styles section).

---

I could see the style by following below steps suggested by Babiker - "Right-click element, but DON'T move your mouse pointer away from the element, keep it in hover state. Choose inspect element via keyboard, as in hit up arrow and then Enter key."

For changing style follow above steps and then - Change your browser tab by pressing ctrl + TAB on the keyboard. Then click back on the tab you want to debug. Your hover screen will still be there. Now carefully take your mouse to developer tool area.

---

Changing to hover status in Chrome is pretty easy, just follow these steps below:

1) Right click in your page and select inspect

2) Select the element you like to have inspect in the DOM

3) Select the pin icon (Toggle Element State)

4) Then tick the hover

Now you can see the hover state of the selected DOM in the browser!

---

In my case, I want to dubug bootstrap tooltip. But the methods above not work for me. I guess bootstrap implemented this by something like mouse in/out event.

Anyway, when I hover on a button, it will generate a brother html element below the button, so I select the button's parent element in "Elements" tab of "Developer tools" window, hover the button, and "Ctrl + C", then I can paste the source code which contains the generated code. Last find the generated code, and add it to the source code by "Edit as HTML" in "Elements" tab.

Hope it can help somebody.

---

나는 이것이 더 이상 Chrome에서 문제가 아니라고 생각합니다. TAB 키로 이동할 때 DOM을 검사하기 위해이 jQuery 스크립트 를 작성했습니다 .

'mouseover'를 사용하도록 변경하면 다음과 같이 표시됩니다.

$("body *").on('mouseover', function(event) {       
    console.log(event.target);      
    inspect(event.target);
    event.stopPropagation();
});

중지하려는 요소를 클릭하거나 수행 할 때마다 이벤트 처리기를 제거하도록 쉽게 수정할 수 있습니다.

참고 URL : https://stackoverflow.com/questions/4515124/see-hover-state-in-chrome-developer-tools