المساعد الشخصي الرقمي

مشاهدة النسخة كاملة : متصفح موزيلا فايرفوكس Mozilla كيفية تثبيت التحديد Inspector highlight sticky



Rise Company
14-06-2021, 01:01
متصفح موزيلا فايرفوكس Mozilla كيفية تثبيت التحديد Inspector highlight sticky
How can I keep the hovered menu item open so I can edit it's style in firefox
How to debug CSS with Firebug for an element that only appears when clicked?
Can you make hovered state in Firebug “sticky?” how can i force the hover state off?

https://www.rise.company/upload/uploads/16236263130791.png

المشكلة





I want to debug the CSS for a DHTML menu, but the element I want to debug is a submenu, so it only appears when the top element in the menu is clicked.



حل المشكلة :

كما فى الصورة فى الاعلى
In the Inspector window, locate the code line where the hover starts,
right click the mouse and choose the :hover. Then the hover state will stay

Select your element in the HTML tab, directly in the source.
:hover pseudo-class.

او هكذا

https://www.rise.company/upload/uploads/162362755990591.png

1- يجب اولا استخدام inspector لتحديد menu
2- يتم الضغط على hover وهيثبت تحديد menu

او للتحديد المؤقت العادي

https://www.rise.company/upload/uploads/162362527295371.png


المرجع
https://stackoverflow.com/questions/4105102/can-you-make-hovered-state-in-firebug-sticky?rq=1
https://stackoverflow.com/questions/24409626/how-can-i-keep-the-hovered-menu-item-open-so-i-can-edit-its-style-with-firebug?noredirect=1&lq=1
https://stackoverflow.com/questions/44506946/can-the-firefox-devtools-inspector-highlight-be-made-sticky
https://stackoverflow.com/questions/10601431/inspecting-hover-state-in-firebug-or-chrome-devtools?rq=1

Rise Company
14-06-2021, 01:34
Chrome Dev Tools has a built-in :hover state selector in the Elements > Styles panel. You can toggle other pseudo-classes (like :active) there as well.
Also in Firefox, if you want to debug the DOM instead of the CSS, you'll have to : 1) press F12 to open the inspector 2) select the Debugger tab 3) hover the element you want to inspect while in the :hover state 4) press F8 to pause the debugger 5) select the DOM Inspector tab Everything stops while in pause mode, JS, DOM refresh, CSS states, but CSS animations. The most important is to be in the debugger tab while pressing F8.