Trying to do some front end design work and I needed to do some debugging/testing of my css.
I know with most browser dev tools, I can click on an elements and get a full style trace.
But what I want to do is the reverse.
I know the selector and I wish to find all elements that are associated with it (simple ctrl+f not working out)
How would I go about this?
You can surely do this in the normal Javascript console with document.querySelectorAll.
So if you want to find all the elements that match body div.heading h1, do
document.querySelectorAll('body div.heading h1');
The browser console will show the elements it has found. Most also highlight them in the page when you mouseover the listing in the console.
Related
I am making project in Angular 5. When I inspect the CSS there is tag. If we want to change or find out that CSS is coming from which file basically or which line number of that file (like we do in normal html page). How can I find it?
With angular, the CSS is injected straight into the html page during compilation.
Therefor it's not possible to see where the CSS came from with the DevTools.
However, it is possible to see the CSS styles applied to an element, if you want to find out which file it came from, you will have to search the project.(ctrl+shift+f)
If you're using Google Chrome, you can use the developer console. Safari has a similar interface, but I'm not as familiar with that.
To access the developer console on Chrome, use keys Cmd-Option-I and you should see a console pop up on the right of your browser window. Next, if it isn't already selected, select the Elements tab at the top. You should now see the html that your browser rendered into the site.
Next, you'll want to select the element you want to inspect. You can either do this by accessing the nested HTML structure directly, or if you select the mouse icon at the top left of the window, you can select an element on the webpage and it will be expanded in the developer console.
Once you've selected an element (it should be grey/blue highlighted), you can see its styling at the bottom of your tab. The styling is in decreasing hierarchy order: the top elements override the bottom ones. You can see the styling is grouped based off of the id/class that it is applied to and at the top of each section is the file line of from which the styling came. Click that link to see the file!
I want to know if there is the possibility, by browser inspection of write a new class containing new hover/focus. For example
.CanIDo {
/*something css
(ex.)*/
width: 100;
}
/*my question (BY BROWSER ISPECTOR, i don't want to type it directly in my css using a text editor)*/
.CanIdo a:hover{
opacity: 0.7;
}
I think this is impossible because browser ispector don't admit to change a class directly, but only the containing of that class (right?), but maybe there are browser that have impove that, I think it can be helpful developing a web site.
Thanks!
If I understand your question, you are asking if you can write CSS "on the fly" in a browser Dev Tool and see the effects immediately on your page?
The short answer is yes. The Dev Tools in Chrome, FireFox, and even the latest IE/Edge browsers have that ability. You can tweak applied styles one by one using a DOM inspector or even wholesale update a CSS file in a Sources tab (the name varies slightly between browsers).
And yes, you can write pseudo-class rules like hover and they'll take effect. You can develop or tweak your code and see the results immediately.
Most browsers have inspect tools that allow you to add any class on the fly.
For instance on Chrome if you open Developer Tools you can add any class to your css, be that a :hover variant or any other normal class, pseudo-class.
What you have to do is open the inspector Cmd + Shift + I on OSx and you'll see this on the Elements tab:
You can see that on the Filter you have a "+" button, clicking that you'd be able to stuff like this:
Those two classes a:hvoer and other-class are added via the inspector as you can see on the right is written: inspector-stylesheet
Chrome (and Firefox) both have really awesome tools for changing the current state of an element, e.g. setting it to a hover state so you can examine/modify css:
The problem is that this doesn't seem to set off any JavaScript events.
I'm currently trying to style a tooltip, which is shown on hover. It's difficult to hover over the element manually as the tooltip dissapears when I take the mouse off of said element, and setting the state to hover in the developer tools doesn't seem to set off the jQuery events.
I'm having to resort to adding an ID on the element in the developer tools inspector, then doing the following in the console:
$("#custom-element-hover").mouseover();
Which feels wrong (and is a little cumbersome).
Is there a better way to do this that I don't know about?
In a simple situation I think it is often easier to use the console as you are doing. But within developer tools, you can also find the event listener code and set a breakpoint on it:
You then right click on this handler and do view source, unminimize the source with the {} button and set a breakpoint in this handler function.
If this handler function triggers on unrelated events then you may need to right click on it and make the breakpoint conditional or add Watch Expressions to see when you are at the correct event.
You could also use the same method of breakpoint setting to instead skip over a particular mouseout event.
I can share with what I do in this kind of situations. I open elements tab in chrome debugger and right click on target element. Then I choose "Copy CSS path"
If you do this you will get something like this
#mdhelp-tabs > li:nth-child(1)
And this string can actually be used as legimit selector for jQuery. So this
$("#mdhelp-tabs > li:nth-child(1)")
will give jquery object with target element of dom in it.
So you would not have to assign an ID to every single element you want to deal with.
I am not sure but you can use console to handle tooltip
Just wondering if when i display a div as hidden does the information gete loaded then hidden or does it get loaded when it is shown? can't remember the ters but it's like display="none" or something.
Thanks
This question is similar to yours. Does display:none keep elements from loading?
The part that relates to your question is this ->
Nope. display: none will only prevent the element from being
displayed; it will be loaded nevertheless.
You can watch this happen in the element inspector of your choice
(e.g. in Firebug or IE8's dev tools).
The best way is probably to create the Video element using JavaScript
afterwards, or - if you want a fail-safe solution in case JS is turned
off - you could use an iframe that loads the video if the user clicks
a link.
Hope that helps!
It still gets loaded into the DOM, but the browser doesn't show it since there is a hint to hide it.
Just use a DOM inspector like IE deveopler tools to inspect it, and you will see it with display:none
There are couple of CSS styles that you can use to hide the information from being displayed.
display: none and visibility: hidden
Both of them will actually load the DOM content but does not display them.visibility: hidden takes the space required for that DOM element accordingly in the layout eventhough it does not display the element. But display: none considers that the element is not present in the DOM and does not occupy any space in DOM corresponding to that element.
Please see this: http://jsfiddle.net/JSWorld/ADSmc/
I can double click on attributes and change them in the Google Chrome inspector. I can add CSS, I can add Javascript to the console. But can I add HTML?
Right-click an element in the inspector, and select "Edit as HTML".
You can then add whatever HTML you want inside of it.
Warning: this will destroy the element with all its descendants, and will then recreate them once you're done editing the HTML. Any event listeners set on any of those elements will no longer work, and any references you might have to any of those elements will be lost.
If you have to keep the elements alive, you'll have to do this programmatically. After selecting the element you want to edit, head over to the console and programmatically add the element you want. Within the console, you can reference the selected element by the variable name $0. For example, if you want to append a div to the currently selected element, type this into the console:
$0.appendChild(document.createElement('div'));
In Chrome version 100.0.4896 Right-click in the inspector doesn't show the context menu.
So to add HTML element click on the three dots on the left side of the inspector as showing in the below snapshots and select Edit as HTML.