I have this code in the XUL file of a custom Firefox extension:
<toolbarbutton label="Home" id="home-b"
class="toolbarbutton-1 custombutton"
oncommand="getBrowserWindow().gBrowser.loadURI('http://www.google.com');" />
which is supposed to change the url to google.com. However, it's not working; nothing happens when I click on the button.
What did I do wrong?
Generally it is a good idea to open Error Console (Ctrl-Shift-J) and to check whether your code resulted in an error. The error message should give you a good idea about what's wrong.
That said, the error message is most likely "getBrowserWindow is not a function" - Firefox doesn't define a function like that. Your toolbar button is located in the browser window, so you don't need anything special to locate the window. This should do:
window.gBrowser.loadURI('http://www.google.com');
Note that this will load the page into the current tab. To open a new tab use:
window.gBrowser.loadOneTab('http://www.google.com');
See https://developer.mozilla.org/en/XUL/Method/loadOneTab for additional parameters of this method.
Related
I'm making a Chrome Extension and need to view the HTML/CSS/JS of the popup.html.
I can't right click to inspect elements. Is there another way? I need to make sure CSS and JavaScript is being inserted correctly. How to debug a problem in that popup file?
Right click the extension's button, then 'Inspect Popup'
Inspect Popup has gone away with the latest build.
Here's how I debug Chrome Extension Popups.
Click your popup button to see the webpage (the popup window itself).
Right-click in the window and select Inspect element
The Chrome Debugger window comes up with the right context, but you've already missed your breakpoints and debugger statements.
HERE'S THE TRICK. Click on the Console part of the debugger and type: location.reload(true) and press enter.
Now your breakpoints are hit! Great way to reload changed scripts without revisiting the Extension page.
Perhaps another way may be to find the ID: for your application in chrome://chrome/extensions/
You can then load your popup in a regular window by
chrome-extension://id_of_your_application/popup.html
Exchange popup.html for the file you have specified in manifest.json under "default_popup" property.
Yes, 'Inspect Popup' on the extension icon, and apart from that - from extension manager you can also inspect your options page.
Try switching Auto-open DevTools for popups in the bottom right of DevTools Settings:
Another good way to inspect Javascript being part of the extension popup is adding special comments to the end of the script to be debugged:
// #sourceURL=popup.js
This is de-facto a directive for DevTools to include this specific file into Sources tab. From there you can inspect code, add breakpoints, output to console, etc. as usual.
I accessed a website and opened console.
On elements tab, I found a button in HTML code that has "onClick='request();" code
I want to find the definition of request() in javascript.
How can I do this?
Just type request in console and press ENTER. it will return the function definition.
This will only work If the request is defined in global Namespace....
Inspect the element in Chrome Dev Tools (F12).
Select that element and choose "Event Listeners" tab. open "click" one and you will find that function.
I'm currently moving a website from self hosted onto a CMS system. The current site uses a modal popup script called SqueezeBox.js
I've copied the code across exactly how it looks on the current website, however the modal popup box isn't triggering when I click on a thumbnail image.
Looking at the code in the header I've spotted that the CMS I'm using is also calling a number of other javascript files and I'm wondering if one of them is causing a conflict.
What's the best way to find out if this is the case? I've tried Firefox's plugin Web Developer but can't see anything in the Error Console. However I'm not 100% sure I'm using it correctly. Can anyone else point me in the direction of a simple to use javascript conflict detector?
Cheers
Adam
If you have Google Chrome, open up the Developer Tools and you can go into the 'scripts' tab, open up your javascript files and look for the click handler.. click along the side of the code to set a breakpoint, then when the code reaches that spot (if you click it, for example), it will pause, and then in the Developer Tools you can see what functions are being called where as you step through the code. You can also hover over any variable in the code window to see its value. Very handy! You can then see if it's getting into your plugin at all (you can do this as well by setting a breakpoint inside the plugin at a place like the first line that will always be accessed when its run).
I believe you can do the same thing with Firebug
It's a bit of a different thinking process to get into (step into, step over, turning breakpoints on and off etc) but it's extremely useful.
A more simple way of checking where problems are occuring is by adding an alert('im working); or something similar to code you're not sure if it's working. You can also alert a variable to see what the value is at that point. You can also use console command to print it to firebug's console. These are doing things that breakpoints/debugging do for you except with the debugging you don't need to change your code.
If there is a javascript error, then the easies way is using firebug or the Chrome Inspector (right click on the thumbnail and choose "Inspect element"). Open the console tab of either and refresh the page. If there is an error, it will be reported in the console and provide a link to the relevant line.
If there is no error being reported, then the code's logic is preventing the box from being displayed. You'll need to step through the code to find the error. Look at what function is being called from the click handler of the thumbnail image. Go to that function in either tool and place a breakpoint on the first line of the function. Click the thumbnail again and the code will pause on that line. From there you can step through the code and see which code branch is followed. There's likely a sanity check at some point that fails and causes the code to bomb out.
I'd need the following functionality for Google Chrome.
I didn't find a command line parameter that could help me here.
check if a URL is open in one of the Google Chrome tabs
if so, activate this tab
if not, open the URL in a new tab
Any ideas how to solve this?
I think Chrome extensions docs - Tabs will help you!
Just to make it clear you can't NOT access anything beyond your Domain in JavaScript because of Same origin policy.
Using Javascript, triggering an alert can have the desired effect. Run this code in your console in one tab and switch to another tab in the same browser.
setTimeout(function(){
alert("Switched tabs");
},
5000);
The alert appearing after the timeout will trigger tab switch. Or you can do something similar! This should however be used if absolutely necessary to move user from current tab, like Google Calendar does.
Update 2019
With new versions of Chrome, this no longer works. As pointed out in the comment below, Chrome now shows a small icon in the tab to show a window/alert has been triggered
I have a pop-up window in a web app that allows you to edit details of a job. You can also click a link to cancel/delete that job. But when I click that link right now after making some edits to it, nothing happens.
It behaves as if javascript was targeting it with "return: false;" so it does nothing. The URL is correct. How can I check if there is JS intercepting my click event, and where it's doing that? Can Console do that? I'm not sure how if so.
Thanks!
In firebug you can debug your javascript code with:
console.log('text and '+variables);
You can click the console tab in firebug and see values. you can add a console.log line within your click handler to see if it's even getting inside the handler.
chrome's developer tools will list all handlers registered for an event on an element. i don't know of any other tools that provide this info.
Firebug is an invaluable tool for helping you debug javascript / coding javascript applications. I would suggest installing it to see what your error is etc.
Alternatively, Firefox has an Error Console, which you can view Javascript errors as well.