6

I'm doing UX testing. Wondering is there any way (think of application or javascripts) that I can run on a page and check what the font size of a-tags, p-tags, etc

8

Firefox

Tools-> Web Developer -> inspect

IE

Tools -> F12 developers tools.

IE developer tool works pretty well in my opinion.

enter image description here

  • 1
    Chrome: Wrench icon -> Tools -> Developer Tools. Or Ctrl+Shft+I – Marjan Venema Mar 19 '12 at 7:27
  • 1
    Firebug is an extension for Firefox which works in a similar way. You can trace styles and change both CSS-rules and actual html-markup without making changes to your document. – dotmartin Mar 19 '12 at 10:42
  • @MarjanVenema F12 also works in Chrome as an alias to ctrl+shift+I – Pierre-Alain Vigeant Mar 19 '12 at 17:15
  • Also in Chrome: Right click -> Inspect Element – Broots Waymb May 17 '16 at 17:52
3

If you want to test the css automatically, you can use Selenium: http://seleniumhq.org. A short article about css testing with Selenium can be found here: http://ajaxian.com/archives/csstest.

  • Hi Frank welcome to UX.SE! The question was about finding out what is displayed not testing it against desired specs. – dnbrv Mar 20 '12 at 12:21
2

Also there is a great tool called WhatFont: http://chengyinliu.com/whatfont.html You can check which font used on the page, it's size and line height.

  • 1
    Developer tools built-into browsers are more efficient than third-party websites. – dnbrv Mar 19 '12 at 16:58
  • Right, but I can figure out which font used on the page using WhatFont with less efforts over Safari developer tool. – Artiom Dashisnky Mar 20 '12 at 11:40

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.