Less than month ago, by accident I discovered a nice tool in Firefox that was installed by default. I don't remember the name (probably code inspector or something like that) but I used Ctrl+Shift+I (Tools -> Webdeveloper -> Name of tool) shortcut to run it.
What was the tool? The tool worked such that when you positioned the mouse over some place in the webpage, in the tool's window you would see the HTML code for that place. Now, I my system is updated, and this tool has disappeared from my browser. I'm very disappointed. Anyone know what tool I'm looking for?
Thanks in advance,
Kuba
By the sound of what you are describing it was probably the Web Developer addon, might also have been Firebug (which in my opinion is better).
You can try right clicking on the page element and select "Inspect Element" which will enable element inspection. This will enable you to view the HTML contents of the elements under your mouse.
The name of this tool is: Page Inspector
https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector
Related
It might be just me but I can't find any way to get DOM element's XPATH in Firefox.
That was possible in Firebug, but now it's deprecated in favor of Firefox Developer Tools, and the recommendation is not to use it any longer.
So, is there any way to get XPATH in Firefox and its Developer Tools?
Open the developer tools in Firefox, then:
Click on Console tab.
Type allow paste if you are pasting anything.
Type the XPath like so:
$x("path")
For example:
$x(".//*[#id='4th']/tbody/tr[1]/td")
Firebug also works well, so I suggest using that instead.
This feature is available in the Firefox DevTools since Firefox 56. To copy the Xpath of an element, right-click it within the Inspector and choose Copy > Xpath from the context menu.
In earlier versions of Firefox the option was placed in the first level of the context menu. As more copy options got added, they were moved into the Copy submenu.
Even if there is no extension available for Firbug in Firfox V57/Quantum. Still we can performed same operation which we performed earlier with the help of firebug, in Firefox dev tool now. Firefox dev tool has more advanced function than normal browser. So It will be helpful for UIDesigner or any Developer.Features in Developer Tool-Features in Developer Tool
To install & Download Firefox Developer Tool- Firefox Developer Tool
For XPath: Select any element by right click on it and choose Inspect Element(Q) then element/tag gets highlighted under inspector developer tool. Then Right Click on tag and select Copy=>Xpath or CssPath.
but the xpath or Css provided by above option will not be correct always if application is dynamic or having dynamic ids etc...
So better to use console option/ select console option (Press F12) write allow paste and enter.
For Xpath =>we have to use ($x) example: >>$x("//p") It will gives all p tag.
For Css path=> we have to use ($$) Example: >>$$("p") then Enter It will gives all p tag.
You can get the XPath in Quantum by right-clicking on the element html in Inspector and select Copy > XPath. For eg.
For instance the html below will give you the Xpath as - /html/body/form/table/tbody/tr[2]/td[2]/table/tbody/tr[2]/td/table1/tbody/tr[4]/td1
You can also get an earlier version of firefox using from the release page.
Make sure you disable auto update otherwise your browser will upgrade to new one.
You can also use the X path Add-on https://addons.mozilla.org/nn-NO/firefox/tag/xpath to get the x path
I am learning chrome extension by example. Here is the example I currently learning: http://www.chrome-extensions.net/extensions/mappy/
There are three JavaScript files in this sample project: background.js mappy_content_script.js popup.js.
"mappy_content_script.js" is shown in the Combo box of Scripts tab of Developer Tools.
"popup.js" can be found if I right click the extension icon and choose "Inspect popup".
The problem is I can't debug "background.js" or find it in the Developer Tools. I tried insert "debugger;" in this JavaScript file. I also tried use profiling tool to record the script execution. However, when I click the link of "background.js", a blank page shows up.
Is this a bug of chrome or did I miss something? Thanks
background.js is loaded in the background. To inspect it visit chrome://extensions, find the loaded extension, and "inspect active views" for the background script.
Edit
Below is a screenshot of the chrome extensions page. A click on the link background page opens the background page for this extension.
Additional information
EDIT 2020
Here is how you can see the content scripts and debug,
Nowadays you have to install a Chrome extension to allow you to inspect the view of a page, specifically the Develop and Debug Chrome Apps & Extensions
There is an easy way to access your extension code in DevTool and debug it.
Open the DevTool (e.g. F12) , click on "Sources" tab
then look for "Content Scripts" menu next to Page , Filesystem, Overrides etc.
and click on it .
you should see all active extensions listed there and you can easily add break point to each js code and reload the page to debug through
I use Conkeror on a daily basis except at work where I need Firebug, since I'm a web developer. I really miss having the "follow link" ability in Conkeror but I don't want to resort to using Vimperator to get it.
Is there any Firefox extension which lets me follow links by hitting a key followed by the link text like in Conkeror?
There are many ways you can already use only the keyboard to browse with Firefox.
Searching pages
The find-as-you-type feature was an epiphany. While Google is great at getting you to the right web page, Firefox's find-as-you-type feature gets you the rest of the way.
Find as you type text: /
Find as you type link: '
Regular old find: Ctrl/Cmd+F
The link search is very useful, especially when used in conjunction with...
Opening pages
Unless you do all of your browsing in one page, these shortcuts are huge when you don't want to go running for your mouse.
Open link in new window: Shift+Enter
Open link in new tab: Ctrl/Cmd+Enter
Open address/search in new tab: Alt/Option+Enter
Used together with their respective shortcuts (address and search bar shortcuts and the find-as-you-type link shortcut), the page opening shortcuts go a long way toward mouse-less browsing.
Of course, you can also use the Mousless Browsing plugin.
Mouseless Browsing (MLB) enables you to browse the web entirely with the keyboard. The basic principle is to add small boxes with unique ids behind every link and/or form element. You just have to type in the id to trigger the corresponding action i.e. following a link, pressing a button or selecting a textfield...
There's Pentadactyl - and all firefox extensions work well with it.
https://addons.mozilla.org/en-US/firefox/addon/8781
Works even better with Linkification, I might add.
I've read some documentation and tutorials about developing Firefox Addons.
But never found how to do this.
I would like to make an addon that when you try to save a file (via left-click or right-click/save as) it automatically sets the to-be-created-file's name to be the same as the original file's URI. (but with some changes, like making slashes into hyphens, etc.)
Any hints on how to do this?
Thanks!
I don't believe Firefox Add-ons can change the default "save as" behavior. They could however add another option in the context menu (right click) perhaps named "save as file named with uri". You'd want to learn some JavaScript and such and look at a demo Add-on for the context menu.
Okay, so I looked at a starting point, which took me to these:
A pretty complete get up an developing guide from Mozilla. (No context menu stuff)
A XUL reference. It mentions there is a way to configure the context menu.
Some code snippets for various Mozilla developing.
A very comprehensive hello-world. Similar to #1, but it DOES cover adding actions in the context menu.
I think you can override any behaviour in Firefox - finding out the correct XPCOM call and location in the DOM tree is another matter. Have a look at Extending Firefox and Thunderbird
Is it possible through a plugin or setting or something to allow Firefox to recognize the live DOM source code?
Basically, firebug or other similar tools can recognize elements on the page which Firefox does not.
I understand with these extensions I have the ability to see such changes made by javascript, but Firefox does not seem to fully recognize them.
I'll try to clarify.
If I load a page and view source (ctrl-U), I see what the server sent to Firefox, and what Firefox ostensibly recognizes as the source code of the page. If in that source code, there is javascript which alters the DOM, and then I hit (ctrl-U) again, the code is not updated.
I am using a testing tool (iMacros firefox plugin) to automate functionality, but it does not recognize the updated DOM because Firefox does not. Firebug and similar tools can recognize these "live" updates. Does that help?
http://www.chapter31.com/2006/12/04/viewing-ajax-generated-source-code/
You can try using the web-developer extension with a view-generated-source option.
I'm still not sure I understand your question, but I think what you're getting at is the Web Developer extension for FireFox, specifically its "View Generated Source" feature.
That will let you see the altered DOM.
Firebug gives u this ability:
for instance check the HTML tab when running a jquery ticker and see the dynamic changes live in the DOM
Usually, when I have weird issues with either the console or the DOM inspector with firebug, I find restarting the browser and validating your code is the way forward.
That said, I'm not really following your question, the document that firebug shows is the same one in the firefox window...?
It looks like the problem is not that you want firefox to show the current DOM when you hit CTRL+U, but that you want some automated testing tool to be able to test your web pages.
Perhaps you should use a testing tool that is suited to the job of testing rich web applications, Selenium, for example, can do this.