Showing posts with label firefox. Show all posts
Showing posts with label firefox. Show all posts

Friday, July 08, 2011

firebug frame - tips

Here are a few tips for using firefox's firebug and frames:

An example of a frameset:

screenshot of a frameset rendered in firefox


<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Frameset example</title>
</head>
<frameset rows="50%, 50%">
 <frame src="frame1.html" id="frame1" name="frame1"/>
 <frame src="frame2.html" id="frame2" name="frame2"/>
</frameset>
</html> 

By default firebug is relative to the "window", to make commands relative to a frame instead, you can use the "cd" command in the console pane, for example:


cd(window.frames["frame1"])

a command typed into firebug command line in firefox

Now when you execute command it will be relative to the window instead.

So for example if you had this code in frame1:



<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>frame1</title>

<script type="text/javascript">
function hello() {
 alert("hello")
}
</script>

</head>
<body>
frame1
</body>
</html>


You can run the function in the firebug command line simply by running the function: hello()

an alert box being triggered within a frameset from the outer window via the firebug commandline

Similarly you can also use this alternative syntax to get to the frames:

cd(window.top)
Back to the default root window

cd(document.getElementById("frame1").contentWindow
To reference the frame by id

cd(document.frames[0]
To reference the frame by number

Sunday, December 19, 2010

Simulate a slow internet connection in web browsers (Internet Explorer, Firefox, Chrome etc)

You can easily simulate a slow internet connection, by using a tool called "fiddler".

Perhaps you are trying to debug a web application that is behaving strangely on other peoples computers (but is working fine on your own?!). Perhaps you wish to simulate a slow modem or a slow corporate VPN.

The fiddler is a web debugging proxy which logs all HTTP traffic between your computer and the internet. The fiddler has a setting to temporarily throttle your internet connection, to make your connection behave like a slow modem. The great thing about the fiddler is that it "automagically" sits in between all your web browsers and the internet, so it works with firefox, internet explorer, chrome etc etc.

Firstly you need to install "fiddler", just go to http://www.fiddler2.com, download it and install it. It installs in seconds and has a getting started guide if you need it.

a screen shot of fiddler2.com

Once you have the fiddler installed, open it and once loaded you should see a window similar to below. It should automatically act as a proxy, so if you browse to a website in any browser you should see it being logged in the fiddler.

the first page of the tool: fiddler. With a few HTTP requests logged.

To switch on "simulate slow modem speeds" mode in the fiddler (as illustrated in the screen shot below):

  1. If not already opened, open the fiddler.
  2. Click "Rules" on the top menu.
  3. Then go to "performance".
  4. Click "simulate modem speeds"
a screen shot illustrating how to turn on simulate modem speeds in the application called fiddler.

Now any web browser that is using fiddler (should be all web browsers by default), will temporary be slow (until you turn it off)

This is only scratching the surface of what the fiddler is useful for. There is plenty more information and an introductory video in the fiddler help section.