• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

My Monkey Do

A Log of Coding Solutions

  • Home
  • Web Hosts
  • Tools
  • About

firebug

Relative positioning of table rows and row groups is now supported. This site may need to be updated because it may depend on this feature having no effect.

May 19, 2016 by Webhead

Firefox displayed this warning in the Firebug console.  This warning indicates an absolutely positioned does not consider a table element relatively positioned so it may not appear as expected.  A better explanation is here:

https://www.sencha.com/forum/showthread.php?289315-Relative-positioning-of-table-rows-and-row-groups-is-now-supported.-This-site-may-nee

and solution to fix is here:

http://stackoverflow.com/questions/5148041/does-firefox-support-position-relative-on-table-elements

Filed Under: Coding Tagged With: css, firebug, firefox

Google font WOFF in Firefox

February 8, 2013 by Webhead

Problem

In a website that gets fonts from Google’s CDN, the browser window loading icon continuously runs.  In Firebug you can see that the WOFF file from google is the culprit.

 

Solution

Turn off Firebug.  Apparently it’s a problem with Firefox/firebug that causes this issue.  Once you turn off firebug the website loads and no loading icon is shown.  The issue may be related to this, but not sure:  http://code.google.com/p/fbug/issues/detail?id=4649

 

keywords: google woff firefox error

Filed Under: Coding Tagged With: debug, firebug, firefox, google

Firebug in Safari

November 13, 2012 by Webhead

Since Safari 3.x, you can now have a firebug-like tool in Safari.  Either open terminal and copy-paste the line below or edit the plist file here ~/Library/Preferences/com.apple.Safai.plist.

defaults write com.apple.Safari WebKitDeveloperExtras -bool true

Most websites stop there saying “you should now be able to right click and see the ‘Inspect Element’ in any contextual menu”.  Well, I didn’t.  I had to show the developer menu.  Here’s how to show the developer menu straight from Safari help:

open Safari preferences, click Advanced, and select “Show Develop menu in menu bar.”

Once you do that you should be able to see “Inspect Element” in the right click menu.

source: http://macdevelopertips.com/defaults/firebug-like-tools-in-safari.html
keywords:firebug safari

Filed Under: Tools Tagged With: css, firebug

iPhone Viewport and position absolute

January 20, 2012 by Webhead

Problem

I have a div with id “stripe” that is using absolute positioning to be at the top of the page and span 100% of the page width.  It overlays the top part of the website.  The rest of my page is 1000px wide.  When viewing on the iPhone, the “stripe” div is only a portion of the screen width.  Why?

 

Solution

If you debug the website for the iPhone, you’ll see that the width of the “stripe” dive is only 320px.  Sound familiar?  That’s because the width of the iPhone is 320px and so 100% of the viewport is 320px according to the iphone.  There are many possible solutions for this.  One solution is to make the “stripe” div’s position relative.  The relative allows the 100% width expand the entire 1000px .  Then in the following div set the margin-top to negative of whatever the “stripe” div’s height is.

Filed Under: Coding Tagged With: css, debug, firebug, iPhone

Debugging Websites for iPhone

January 19, 2012 by Webhead

Problem

I created a website that looked great in IE7+, FF, Chrome, and Safari, but on the iPhone a few things looked off.  Problems could be from the viewport being 480px wide but the website is 1000px wide so using percentages can mess it up… that’s another post sorry.  The problem is, how do I use something like firebug to debug the css and html in the iPhone mobile Safari browser?

 

Solution


The best solution is if you have a Mac OS X and the iOS 5 SDK.  If you don’t have a Mac or  you don’t have iOS5 SDK and don’t want to download it from the Mac App Store, move on to the next solution.  This solution involves a great FREE tool to debug, profile, and inspect  web applications running in the iPhone simulator is iWebInspector by Max Firtman.   This tool, as it says in the tool, enables a private API available on the iOS 5 framework.  It lets you inspect the web page or webapp  similar to firefox.  To use it:

  1. Download, install, and open  iWebInspector
  2. Click on the “Open iOS Simulator” button
  3. In the Simulator, open Safari and go to the URL you wish to debug.
  4. In iWebInspector click on the “Load from Safari” button.
  5. Click on the link it displays
  6. Now you should see the DOM and all it’s CSS attributes.

One thing annoying is that you can’t add CSS attributes to existing CSS classes.  A way around this is to add attributes to the element.style section for the element you want to alter.  Another thing I noticed is that the Simulator freezes from time to time.  To “unfreeze” it I had to quit both the simulator and iWebInspector and start over.  Other that it’s great!

 


A second option to debug a website in the iPhone is by using Firebug Lite.  Here’s what you do:

  1. Open this page in your iPhone browser and bookmark it.
  2. Rename the bookmark to “Firebug”.
  3. Tap the code below twice and choose “Select All” and then “Copy”.
    javascript:(function(F,i,r,e,b,u,g,L,I,T,E){if(F.getElementById(b))return;E=F[i+'NS']&&F.documentElement.namespaceURI;E=E?F[i+'NS'](E,'script'):F[i]('script');E[r]('id',b);E[r]('src',I+g+T);E[r](b,u);(F[e]('head')[0]||F[e]('body')[0]).appendChild(E);E=new%20Image;E[r]('src',I+L);})(document,'createElement','setAttribute','getElementsByTagName','FirebugLite','4','firebug-lite.js','releases/lite/latest/skin/xp/sprite.png','https://getfirebug.com/','#startOpened');
  4. Edit the Firebug bookmark.  Remove the URL and paste the copied code into the bookmark.
  5. Save it.
  6. Go to the page you want to debug
  7. Once the page loads, select the bookmark named “Firebug” and it will run firebug on the page.

I prefer the first solution over this one because obviously, Firebug is very small on the iPhone.

 

keywords: iphone safari on desktop, iphone firebug
sources:
http://www.iwebinspector.com/
http://martinkool.com/post/13629963755/firebug-on-ipad-and-iphone

Filed Under: Coding Tagged With: css, firebug, iPhone

Firebug

May 14, 2011 by Webhead

I don’t know how I used to develop web pages before Firebug.  It is the single best tool you can have when debugging a webpage.  If something doesn’t look right I open Firebug and find out what styles are being inherited.  If some javascript functionality is not working I open Firebug and enter debug statements.   If some ajax call is messing up and the page isn’t showing the response correctly, I open Firebug.

Installation

The best thing about Firebug is how much time it saves you on debugging.  Even better than it being free.  That’s a lot considering how I watch my money.   I only use Firebug with Firefox.  It can be downloaded at https://addons.mozilla.org/en-us/firefox/addon/firebug/.  What’s good is that it’s available on both Mac and PC.   Just click on the Add to Firefox button and it’s mostly done for you.  That easy.  A firebug was also developed for IE but I haven’t tried it recently.  I tried it a couple years ago and it didn’t help me very much so I stuck with just using the Firefox one.

CSS

When you need to see why an item on a webpage is not showing as its supposed to you can right click on it and select “Inspect Element”.  Doing this opens up the firebug window and it will tell you exactly what styles are being applied to it and what styles have been overwritten.  You can even change the values of anything you want to see the outcome in real-time.

Javascript

Browsers can tell you the last error code that happened, but firebug can let you watch expressions, look at the stack, insert breakpoints, and print out statements in the console.

Request / Response

Any and all requests to the server can be inspected on the Net tab.  You can see each javascript include file, each image, each ajax request.  This means that if an ajax call goes wrong, you can inspect the parameters that were sent and the response the page got back from that request.  It makes debugging a breeze.

Firebug can be downloaded here: http://getfirebug.com/

Filed Under: Tools Tagged With: css, debug, firebug, html, javascript

Primary Sidebar

Topics

apache apple block editor chrome cms css debug eCommerce embed firebug firefox git gmail goDaddy google hosting htaccess html html 5 IE crap image iPad iPhone javascript jquery linux localization mac os x ms sql mysql open source optimize php php 5.3 responsive rest api seo svg tinymce woocommerce wordpress wpengine xss yii youtube




Categories

  • Coding
  • Off the Shelf
  • Plugins
  • Random Thoughts
  • Server Stuff
  • Tools