This is my project when I am in Inspect Element model in Safari:
You can see the editor.css link on the right.
After I click the link, I come to editor.css detail:
But I don't know how to go back. Some one know how to go to the page (
go to the first snapshot )
Yes, you just click on the first button at superior menu(dev tools menu, reading left to right. It has a reactangle icon). The button next to the inspector button(it is highlithed blue on the first screenshot)
Related
I am using a website template, have gone through much of the style sheets and have used the f12 function in chrome. However, the button is ONLY blue when highlighted so I am really struggling to find it and turn it red. Is there a way to keep it blue so I can find it that way or should I look somewhere else?
"Purchase Now" is blue when highlighted
You can try in the Chrome dev tools (F12) you can use "Force element state" to cause an element to behave as though it is hovered. When you have the button element selected, look for ":hov" in the "Styles" tab within the main "Elements" tab. That should let you toggle the :hover state. Hopefully that can let you see the button when it is blue to investigate some more!
I am trying to style four input controls to looks like the below image any help to get me started would be great
If using Chrome, open dev tools (F12), navigate to the 'Elements' tab, select the 'inspect element' tool on the top left (shortcut: cmd+shift+C) and hover over and then click on the input controls.
This will display the styling that goes in to creating that element, and you can try your hand at replicating it from there.
I have a website where all links are working normally in the major browsers except Safari. In Safari, if the user clicks on a link with target="_blank" and then goes back to the original tab, the link is no longer styled as a link. If you then close the newly opened tab, the link immediately updates to being styled.
That is:
In my site at https://mysite.umich.edu/myapp I have a link in this format:
Accept Role in our Glossary of Terms
On the page, it looks like this:
When I click on that link, the linked-to URL (the glossary) opens up in a new tab, and I am taken to that tab. If I then go back to the tab where I started (https://mysite.umich.edu/myapp), the link is no longer styled as a link:
If then, staying on the original page, I close the newly opened tab (the one showing the glossary), the link will immediately go back to looking like the first screenshot above.
Debugging this is made more complicated by the fact that the problem doesn't happen if Developer Tools are open. Also, some sequence of clicks will make the problem go away, but I have not yet been able to reproduce that effect.
It seems like this must be some sort of timing issue in Safari. Does anyone have any clues about how to fix it?
There does seem to be some sort of timing issue with Safari whereby it holds on to the CSS for A:HOVER in the original tab even after the user has moved the cursor away from the link, but this would not have been a problem if we had had a reasonable CSS rule for A:HOVER. Since our A:HOVER CSS rule set the text color to the same color as our default text, we could not, of course, distinguish the link from the surrounding text. Changing the CSS made this a non-issue.
So it seems like Safari is misbehaving, but in our situation, at least, there is a workaround.
Firefox 46.0.1. I'm using the inspector. I'm a beginner. When I move the mouse around, I get a blue box around the element. I would like to stop the movement so I can use my mouse to move about the lower info boxes.
I found a way of doing this before, but cannot find it now via google. I know this wasn't done via a breakpoint. It was some key press.
answer:
Ok, click on the box with arrow in it; it's on the upper left margin. It turns blue. Move mouse to where you want. Left click. The blue box goes away, but the text below stays frozen.
Supposedly, the answer is here:
https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Select_an_element
Robert
What are stuck in is often referred to as "Point to Inspect" mode or "Inspect Element" mode. In many browser developer tools, this mode is entered via application menu item, right click context menu, or a button in the developer tools UI. The idea is to help the user see the hovered element in a DOM tree visualization.
Usually, this mode is active until the next left click. When the user left-clicks on an element, it is revealed in the DOM tree view. (Some tools also log the element to console.) So, to get out of the mode, simply click on some element to select it.
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.
So I can't use that button on Firebug that shows the CSS for the next element clicked, because when I click on the top menu item it will show the CSS for that element, not its child, and if I expand the menu first and then click on the Firebug button the submenu disappears (it disappears when it loses focus).
Any tips on how to get out of this catch-22?
Use firebug console command line to run click event. Like $('#menutab a').click(); If it's needed, you could also set breakpoint to avoid hidding.
Read more in firebug documentation
Select your element in the HTML tab, directly in the source.
Then, you can hover your page to toggle it.
In cases like this I sometimes alter the script slightly in order for the 'hidden' element to stay visible.
In this case, I would perhaps comment out/disable the script code which hides the element on blur. That way you can click the main element, and inspect the now visible item for as long as needed.
What about debuging with all the buttons visible? Or you can still find the elemnt in the HTML tree.
In Opera, you can use Dragonfly (Tools > Advanced > Developer Tools, or Ctrl+Shift+i) to solve this issue. When the tools are active, clicking on any part of the page will navigate to that section of the HTML side-by-side with its CSS.