In the modern browsers (and Firefox + firebug) you can open up your developer tools and either go to the HTML/Elements tab, or you can inspect an element to get an interactive DOM display.
You can do heaps of useful stuff here, and one thing I need to do often is manipulate/interact with a particular element using Javascript (in the console tab).
What I've been doing is using the interactive DOM to add an id attribute like 'bob', then doing whatever I need to do in the console with document.getElementById('bob') (or $('#bob')).
Ideally what I'd like to do is right click on the element and select an option like make JS variable so in the console I can just use a variable called bob,does anyone know of any such hidden feature/addon/faster method?
Use the built-in XPath context menu as a shortcut. Here is the process:
Right Click on an element from within the DOM Inspector tab
Select Copy XPath from the context menu
Paste selector into the console
Enclose the selector in single quotes
Enclose the selector in the $x() method of the console API
Append the array index of the selector match
Append the desired property/method reference
$x('//*[#id="header"]')[0].innerText
You can now use the $0 variable in the devtools to get a DoM reference to the last element you selected in the Elements pane.
https://developer.chrome.com/devtools/docs/commandline-api#0-4
NB This works in Firefox, too!
Related
I'm about to finish developing an automated program on Python and the only thing that's stopping me it's a web element that gets immediately hidden when I try to inspect it from an OpenSea page (can't share the link here since it requires to be connected to my wallet):
So far, I have only managed to get the XPATH and the CSS_SELECTOR of this problematic element (div#tippy-298) which is the following:
button_problematic_xpath = driver.find_element(By.XPATH, '//*[#id="tippy-298"]')
button_problematic_css = driver.find_element(By.CSS_SELECTOR, '#tippy-298')
But what I need is to get the XPATH or CSS_SELECTOR of the Web Elements that button_problematic_css contains, more specifically the "Starting" and "Ending" Textboxes :
Also, just in case, the element that's on top of button_problematic_css is called "Duration", here's its XPATH:
button_duration = driver.find_element(By.XPATH, '//*[#id="duration"]').click #after clicked it deploys div#tippy-298 element
I was wondering if there could be any method to force the visibility of this button_problematic_css using the Chrome Console in the Inspection of Web Elements, or by using an specific method from Selenium on Python3.x to inmediately download all of the web elements this page has right after button_problematic_css is visible.
What I have tried so far is to manually inspect the element, by pressing Ctrl + Shift + C and and then clicking the elements contained in button_problematic_css which just ends up hiding this element before even clicking its content, the same happens when trying to display the contents of this element in the DOM of this page, it just dissapears.
I just wish my program could be capable of editing the dates in the "Starting" and "Ending" Textboxes
I guess you need to click the button to show the element. why did I guess? you need to show the url
or u can also try this code:
clickmore=WebDriverWait(driver, 2).until(EC.element_to_be_clickable((By.XPATH, 'blabalabla')))
self.driver.execute_script("arguments[0].click();", clickmore)
button_duration = driver.find_element(By.XPATH, '//*[#id="duration"]').click()
After several days of working, I managed to solve this, it happened that in order to get the XPATH from these particular elements, I had to use the Chrome Console and type $('#duration').click();.
In this case, #duration is a Selector that can be used to get the web element button that allows you to edit the period of time you want to set when clicked.
I guess the general statement would be something like this:
$('#your_css_selector').click();
Now, this way I could managed to look deeper in the DOM without making them hide again.
I'm using the Chrome browser's Inspect Element function. It opens some kind of tab in my browser, shows me the HTML, and lets me change it and do some kind of preview. When I change it, I want to know where can I see the line number in my source file. Inspect Element highlights the line of the element that I pick, but when I go to the Source tab, there's no highlighted line.
There's a problem with that: the DOM tree that you see in "inspect element" may not be the same as defined in the HTML file.
JavaScript can modify the DOM tree in arbitrary ways. Afterwards, it's impossible to match a certain node to the original source.
So, your task is nearly impossible and that is why Dev Tools do not try to do it.
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
I use web developer tools to inspect html and subsequently see the css that is attached to the html element. This is proving to be a great process for learning from other websites (and the debugging my own)
Is there a way to inspect the javascript as well? So when I select the element, to be able to see the javascript related to the element?
In the element panel you can find all information related to an element including events attached to it.
You can use console in the element panel to inspect an element using dir(elementId)which dumps the object with the given id, as a JavaScript object with its properties.
You can see javascript code that is attached as event to any element on the page. In Developer tools its in the Elements tab and each element has "Event Listeners" - there you see what events and what javascript will be catched and executed.
I had the same problem and have been wandering a bit until I found how to do it on Chrome:
1. Open the Inspector Ctrl + Shift + i
2. Select the element that you would like to inspect
3. Click on the Event Listeners tab
4. Click on the link next to the event listener you would like to check
5. Click on Pretty Print (Symbolized as {} at the bottom of the window)
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.