CSS QUESTIONS

Firefox is more than a browser. It’s a toolbox, just waiting to be filled with tools.

In this Pimp Your Firefox series of posts I’ll be sharing 12 truly useful Firefox extensions to suit different breeds of freelancers.

I’ve capped the number at 12 to ensure only the highest quality extensions make the cut. This is for freelancers who want only the best tools to make their working day easier and more productive.

This first installment contains the top 12 most useful Firefox extensions for freelance web developers and designers.

1. FireFTP
   A powerful FPT client in one tab, your work in another. Sometimes the simplest solutions can be profoundly useful. (Note: Does not as yet support SFTP).
2. ColorZilla
   This extension allows you to pick colors from the web, paste the hex code into other programs, zoom in on pages, measure distances and utilize a built-in pallet browser. A must-have for any web designer.
3. IE Tab
   Shelve the need to open up both Firefox and Internet Explorer to test your work in IE or properly view a website that hasn’t been optimized for Firefox. IE Tab places a small icon in your status bar allowing you to use IE’s rendering engine for a specific site. You can also open a new IE tab via the right-click menu.
4. Firebug
   An essential part of the web developer’s toolbox, Firebug allows you to tinker with the undercarriage of your project’s CSS, JavaScript or HTML. You can operate Firebux through a panel or in a separate window. It allows you to identify how each line of code shapes the final product as rendered on the web.
5. Load Time Analyzer
   Isolate the loading times of images, stylesheets, page requests, scripts and so on. You can even graph the results — though I’m not really sure why you’d want to…
6. Greasemonkey
   Add Javascript to any webpage. Whether you write your own scripts or use scripts provided by other coders, Greasemonkey helps unlock the full potential of any given website. (Note: try it with DOM Inspector.)
7. Web Developer
   Another developer essential, Web Developer adds an array of custom tools and menus to Firefox. Use it in tandem with Firebug for maximum functionality and control over your code.
8. View Source Chart
   Color codes your HTML to help keep track of hierarchies and nested elements.
9. MeasureIt
   Click the ruler icon in your status bar to unlock MeasureIt’s functionality. It allows you to measure the pixel width and height of page elements via the cursor. Yep — no more cumbersome copying and pasting into Photoshop. When you’re done, hit ‘Escape’ and everything returns to normal. A useful, subtle tool.
10. HTML Validator
    This nifty extension adds a little validation error and warning display to your status bar which updates as you browse. It can validate both HTML sent by the server and HTML in memory after Ajax execution.
11. Window Resizer
    Quickly resize your browser to view websites in 640×480, 800×600, 1024×768, 1280×1024 and 1600×1200 resolutions.
12. Aardvark
    As you move your mouse cursor over a page element it will be isolated by a red rectangle. A yellow caption will display the element’s type and class or id (if available). Keyboard shortcuts then allow you to edit or delete the element.

Nguồn: http://freelanceswitch.com/productivity/pimp-your-firefox-12-essential-extensions-for-web-developers-designers/

.............................

Ngoài 12 cái này, còn 1 số cái tiện nữa như Dust me selector, CSS Viewer, hoặc là Screen Grab, nhưng chỉ có 4 cái cần thiết nhất: Chú ý rằng Bản thân Firefox đã có chức năng : View Selection Source (bôi đen 1 vùng web rồi phải chuột sẽ thấy chức năng này).

1. Firebug: để dùng khi không thể View Selection Source được và muốn xem CSS tương ứng với soure. Ngoài ra còn nhiều chức năng khác nữa, như là cho phép ta thử edit web.
2. Web Developer Toolbar: Cái này thêm vào thanh công cụ 1 thanh nữa, thành ra hơi tốn diện tích, chủ yếu tôi cũng dùng vài chức năng của nó như là Outline, Resize, (misc...) Display ruler, Edit CSS.
3. Color Zillar: để dò màu sắc của hình vẽ (thay cho dùng Photoshop) và dò màu của các element.

IE Tab khá tiện dụng nhưng tôi lại ít dùng do nó không phát huy được khả năng của IE developer Toolbar, thay vào đó tôi lại dùng IE View Lite (bấm phải chuột, chọn View in .. IE). Nói thêm về IE developer Toolbar, cái này cũng có những mặt mạnh và yếu so với Firebug, khi nào tôi sẽ phân tích thêm.

Đôi khi tôi dùng CSS Viewer để xem nó phân tích font chữ, font size...

HTML Validator thì không cần lắm, nhưng cứ cài lên cho nó yên tâm mỗi khi nhìn thấy biểu tượng màu xanh của nó (và validate cũng không có nghĩa là web sẽ giống nhau trên mọi trình duyệt, đương nhiên).

Ngoài ra nếu cần gõ tiếng Việt trên Firefox , có thể dùng thử: AVIM. Lưu ý, cái plugin này sẽ chiếm phần lớn status bar của bạn, ngoài ra nó còn xung khắc với các bộ gõ tích hợp của nhiều forum/blog/website hỗ trợ gõ tiếng Việt và bạn sẽ phải chọn OFF khi vào những site như thế. Thà cài Unikey còn tiện hơn