การพัฒนาเว็บด้วย HTML และ CSS ,  browser  ช่วย Debug code ได้มาก และ Browser ที่ใช้กันมากคือ FireFox และ Chrome

Why Chrome 

As a web developer, you must be able to view your website/pages and easily debug it. Therefore, using Chrome is your best bet.
1. Built in Dev Tools.
2. Webkit. This is mostly supported on Safari as well.
3. A great browser to play around with. You can make all your fancy css3 stuff and test it out. If you like it, you can eventually add those to other browsers with javascript/jQuery.

4. Many many extentions. Though there just about the same amount of useful ones on Firefox, Chrome is IMO the best and most supported.
My list of Plugins:
– Chrome Sniffer – shows the framework a site is using… great for curiosity when browsing the net.
– Cloud Save – Lets you save files from websites to your cloud service of choice… great for web idea/resource browsing as well.
– Code Cola – Edit a section on your webpage directly for testing… like Chrome Dev tools but more direct.
– Eye Dropper – A must… lets you pick colors from webpages and find their various color codes.
– IE Tab – If you have windows, this is a great tool to have so you can view IE view inside Chrome.
– IPCV(Image Property Context Viewer) – See image values and such.
– Measureit – Find the dimensions of objects/classes/etc.
– Palette – Click on an image and it generates a palette from it.
– Resolution Test – A must have… check to see how your site displays on various browser dimensions.
– Session Manager – Save all your tabs for another session of Chrome.
– Web Developer – It does just about anything a Web Developer would need to know/test.
– WhatFont – Find out what font a website uses.

There is my qualities for Chrome… hope it is helpful!

How to use Chrome Development tool

Open Chrome Development tool

  • Right-click on any page element and select Inspect Element.
  • Use Ctrl+Shift+I (or Cmd+Opt+I on Mac) to open the DevTools.
  • Use Ctrl+Shift+J (or Cmd+Opt+J on Mac) to open the DevTools and bring focus to the Console.
  • Use Ctrl+Shift+C (or Cmd+Shift+C on Mac) to open the DevTools in Inspect Element mode, or toggle Inspect Element mode if the DevTools are already open.

Expand And Collapse by Arrow key

Toggle Device mode on and off   Ctrl+Shift+M

 

 

 

Leave a Reply