I'm using the Firefox DevTools and I'm using the Inspector tab, in which it displays the HTML tree.
When I use the Search HTML feature, it only searches tags. So suppose I have this:
<div class="lol">textinsidediv</div>
And when I search for 'div', it returns the <div> accordingly. However, if I search for 'textinside' it doesn't match the text inside the content despite the fact that it's starting right there.
My question: How can I search for any arbitrary string within this HTML tree?
(In contrary Firebug performs a simple text search just as expected.)
The search in the Inspector panel of the Firefox DevTools allows to search for text content since Firefox 45 (see bug 835896).
Btw. since Firebug 2.0 you're also able to search in the HTML panel using CSS selectors (additionally to the plain text search).
It is not some really useless html tag search, it actually searches CSS selectors (same as what you use with css, querySelector in Javascript, or jQuery selector)
So you can search #id, go through all elements of a certain class by searching .class, you can even search for all elements with attribute including text, for example [class*="o"] should give all elements with letter o in class attribute. This is helpful for what designers/developers want to find - to find text, you can Ctrl+F within the page, then right click, inspect element.
A good idea is to Copy Inner HTML but even better is Edit As HTML. That brings up an in-place panel displaying the full text, and it can be searched with Ctrl+F or cmd+F.
Ctrl+G to find next, Ctrl+Shift+G to find previous.
Workaround: in the inspector, right-click the outermost tag, then click 'Copy Inner HTML'. Paste in a word processor and search there.
This is now fixed as of FireFox 45...
https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_HTML#Searching
See answer.
As an alternative to searching within dev tools...
Right click on the page anywhere
Select View Source
Within the source view you can easily perform a text search by doing a ctrl/f or cmd/f if on a mac.
Related
Using Chrome, I can get the path to an element. I select "View source" and then right-click on the relevant item and say "get XPath".
In Safari, I can view the source, and when my cursor's on an element in the source, I can see the xpath visually displayed as a list of elements.. but I can't find a way to get the text for that xpath. Surely there's some way (he said optimistically).
This turns out to be easy, and I don't know why I didn't see it. In Windows at least:
Ctrl-U to display page source (or right-click on the page and click "View page source" in the popup menu).
In the page source, right-click on the element you like; in the resulting popup, click the "Copy >" option
Select "Copy XPath" from the resulting nested popup.
See picture below for an illustration. Everything was done with right-clicks.
Kinda late with an answer, but you might want to consider ios-webkit-debug-proxy by google.
Here is a good Extension for Safari and Google Chrome:
https://github.com/sergeche/xmlview#readme
Safari Extension: http://files.chikuyonok.ru/xv/xv.safariextz
Google Chrome Extension: download
Current features
Collapsable elements: Alt+click to expand/collapse all descendant elements
Outline for better document overview
Search by name or XPath. By default uses simple search mode which looks for a partial match in element‘s or attribute’s name; use special symbols like ‘/’ or ‘[’ to search by XPath
Quick XPath mode: hold down Command (Mac) or Ctrl (PC) key while moving mouse cursor over element‘s or attribute’s name to enter Quick
XPath mode. Use Shift key to cycle through available XPath variants
and then drag’n’drop element under cursor into text editor. Google
Chrome users: click on element will copy XPath to clipboard
Firefox' built-in PDF viewer, PDF.js, has a mozdisallowselectionprint attribute on the <html> tag. What does this attribute do?
The mozDisallowSelectionPrint attribute was added to Firefox to allow web pages to disable the print selection option in Firefox.
Normally, when you select text in a document and then open the print dialog (Ctrl + P or Cmd + P), you can choose the option "Selection" under "Print range".
Because of the way PDF.js works, selecting this option when viewing a PDF document would either result in empty pages being printed or, for large documents, a browser crash.
In bug 830278 it was therefore decided to allow web pages, including the PDF viewer, to disable the option to print selections by adding this attribute to the HTML tag..
(source: broward.edu)
mozDisallowSelectionPrint is available from Firefox 19 and onwards.
in this address i am trying to scrape a tage (that is Larg price which is bold red one)
i use LIBXML 2.2
when i try to extract the tag through this XPATH
//*[#class='priceLarge']
it works!
but to make queries easier i would like to use FireBug on Firefox.
Using FireBug it gives me this XPath
/html/body/div[2]/form/table[3]/tbody/tr/td/div/table/tbody/tr[2]/td[2]/span/b
using this Xpath it does not work, seems this one does not give a complete query. how can i modify this XPath to scrape the item ?
Firefox and other browsers generate tbody tags in HTML.
In fact, the tbody is probably not there, so you can remove it in your XPath. (/html/body/div[2]/form/table[3]/tr/td/div/table/tr[2]/td[2]/span/b) You can test this by just saving the HTML from your application and viewing it in a text editor.
Since it seems the intent is to pull information from a web page however, your application will probably be more resistant to changes in the web page if you use XPath less dependent on the tree structure (i.e. //b[#class='priceLarge']).
EDIT: It seems that in addition to the tbody problem, Firefox is rendering the div (ID: divsinglecolumnminwidth) element as containing the form element (ID: handleBuy).
Looking at the html with an XML editor shows that the form element is a sibling of that div element, so the expression should start with /html/body/form/table[3].
One tool, among many others, to test your XPath expressions is HAP Testbed.
I have a <div id="abcd"> which is changed by other code, I want to find out who is chaning that, can I set up a watch expression so that I can catch it in FireBug?
Thanks.
Bin
Using Firebug 1.5 or 1.6, use the Inspect to select the element, then in the HTML panel, right click on the element and select eg break on attribute change or another one as you need.
See http://getfirebug.com/doc/breakpoints/demo.html
i don't know the exact wording in english, i use it in german. But if you click right on your div, there is a function called "explore element" (normally at the bottom of the context menu). Afterwords firebug displays that area where you can see all live changes...
I am new to XPath. I have a html source of the webpage
http://london.craigslist.co.uk/com/1233708939.html
Now I want to extract the following data from the above page
Full Date
Email - just below the date
I also want to find the existence of the button "Reply to this post" on the page
http://sfbay.craigslist.org/sfc/w4w/1391399758.html
Can anyone help me in writing the three XPath expressions for the above three data.
You don't need to write these yourself, or even figure them out yourself. If you use the Firebug plugin, go to the page, right click on the elements you want, click 'Inspect element' and Firebug will popup the HTML in a viewer at the bottom of your browser. Right click on the desired element in the HTML viewer and click on 'Copy XPath'.
That said, the XPath expression you're looking for (for #3) is:
/html/body/div[4]/form/button
...obtained via the method described above.
I noticed that the DTD is HTML 4/01 Transitional and not XHTML for the first link, so there's no guarantee that this is a valid XML document, and it may not be loaded correctly by an XML parser. In fact, I see several tags that aren't properly closed (i.e. <hr>, etc)
I don't know the first one off hand, and the third one was just answered by Alex, but the second one is /html/body/a[0].
As of your first page it's just impossible to do because this is not the way xpath works. In order for an xpath expression to select something that "something" must be a node (ie an element)
The second page is fairly easy, but you need an "id" attribute in order to do that (or anything that can make sure your button is unique). For example if you are sure the text "Reply to this post" correctly identify the button just do it with
//button["Reply to this post"]