About DwThai.Com 00

DwThai.Com Logo

DwThai.Com

Tip and Trick Dreamweaver

ก่อตั้งเมื่อปีพุทธศักราช ๒๕๔๖





ค้นหาข้อมูลใน DwThai.Com

การใช้ Developer Tools ใน Web Browser [Article ID : 192]


เรื่อง : มารู้จักเครื่องมือสำหรับนักพัฒนาเว็บไซต์ที่มีมากับ Web Browser

บทความนี้มาพูดถึงเรื่อง Feature ที่มีมากับ Web Browser กันครับ ซึ่งเครื่องมือที่เพิ่มเข้ามานี้ มีประโยชน์อย่างมากต่อนักพัฒนาเว็บไซต์ทั้งมือเก๋า มือใหม่ เลยทีเดียว และปัจจุบันแทบจะทุก ๆ Web Browser ก็มีมาให้ใช้งานกัน ไม่ว่าจะเป็น Chrome, FireFox หรือแม้แต่ Internet Explorer (IE) ก็มีให้ใช้ครับ โดยในแต่ละ Web Browser อาจจะมีวิธีการเรียกชื่อทูลลักษณะนี้แตกต่างกันไป เช่น Chrome เรียกเครื่องมือนี้ว่า เครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ แต่ใน IE เรียกว่า Developer Tools เป็นต้น แต่ถึงแม้จะเรียกชื่อต่างกันออกไป การเรียกใช้งานและรูปแบบการใช้งานก็จะคล้ายคลึงกัน จะเป็นอย่างไรมาดูกันครับ

เรียกใช้ Developer Tools ด้วย F12

ในการเรียกใช้ Developer Tools นั้น Web Browser ส่วนใหญ่ใช้การกดปุ่ม F12 ที่คีย์บอร์ด เมื่อกดแล้ว Web Browser จะเปิดเครื่องมือมาให้เราใช้งาน ซึ่งหน้าตาเครื่องมือแต่ละ Web Browser ก็จะแตกต่างกันออกไป ดังนี้

Chrome


Internet Explorer (IE)


FireFox


Request for MySQLi Database Connector

ตัวอย่างการใช้งาน

Developer Tools มีความสามารถหลากหลายให้นักพัฒนาเว็บได้ใช้งาน เช่น ใช้ในการดูโครงสร้างของโค้ด, ใช้ตรวจสอบ CSS ของเว็บ, ใช้ในการ Debug ภาษา JavaScript เป็นต้น ขึ้นอยู่กับว่านักพัฒนาเว็บต้องการใช้งานในแง่มุมไหน สำหรับบทความนี้ ทาง DwThai.Com จะขอยกตัวอย่างการใช้งานเพียง 1 ความสามารถเท่านั้น ดังนี้

การใช้ Developer Tools ในการ Debug ภาษา JavaScript

นักพัฒนาเว็บปัจจุบันมีการใช้งานภาษา JavaScript กันเป็นประจำกับการพัฒนาเว็บไซต์ บางครั้งเมื่อเขียนโค้ดจาวาสคริปต์แล้วทำการ Run ทดสอบ อาจจะเกิดการ Error หรือมี Bug อยู่ในโค้ดโปรแกรมเกิดขึ้น ซึ่งในส่วนนี้ เราสามารถใช้ Developer Tools ที่มีมากับ Web Browser ตรวจสอบได้ ดังนี้

1. มีโค้ด JavaScript ที่มีการเขียนชื่อ Function ผิด ดังนี้
<script type="text/javascript">
	console.lop("Devloper Tools"); //ที่ถูกต้องเขียนเป็น console.log("Devloper Tools");
</script>
		  
2. เมื่อนำไป Run ดูผลกับ Web Browser แล้วไม่สามารถใช้งานได้
3. เปิด Developer Tools ของ Web Browser โดยการกดที่ F12 *ในที่นี้ใช้ Chrome
4. ไปที่ในส่วนของ Console จะพบว่า Tools สามารถตรวจสอบและแจ้งข้อผิดพลาดให้แก่นักพัฒนาเว็บได้ทราบ ดังรูป
ยังมีความสามารถอื่น ๆ อีกครับสำหรับ Developer Tools นี้ ซึ่งบทความไม่สามารถนำเสนอได้ทั้งหมด อยากให้ลองใช้กันดูครับ สำหรับ Developer Tools ที่มีมากับ Web Browser มีประโยชน์อย่างมากต่อนักพัฒนาเว็บไซต์ครับ ลองใช้งานกันดู...สวัสดีครับ
About the Author
Mr.Sittichai Raksasuk

Mr.Sittichai Raksasuk

Sittichai is a Web Developer and Web Technology Instructor for over 10 yrs. He is also a webmaster of dwthai.com and author jQuery with Dreamweaver (2010). DwThai.Com is a website for web developer using Adobe Dreamweaver.

Contact with him : dwthai@gmail.com



บทความอื่นที่คุณอาจสนใจ

เขียนโปรแกรม (PHP) อย่างไรให้ Run เร็ว

เรื่อง : เขียนโปรแกรม PHP อย่างไรให้ทำงานได้อย่างรวดเร็ว เคยเข้าไปอ่านบทความของฝรั่ง (Eng) เขามา เรื่องของการพิสูจน์แล้วน...  

ติดตั้ง Search Engine ของ Google ในเว็บไซต์

เรื่อง : ติดตั้ง Search Engine ของ Google ในเว็บไซต์ของเรา มีคนเข้ามาโพสต์ถามกันมากมายที่หน้า Webboard ว่าอยากจะมี ...  

การตรวจสอบรูปภาพ กรณีรูปภาพไม่แสดงผลบน Web Page

เรื่อง : การตรวจสอบไฟล์รูปภาพ กรณีรูปภาพไม่แสดงผลบน Web Page คุณอาจจะเคยมีปัญหาเกี่ยวกับการ Insert รูปภาพ (Images) มาใช้...  

DwThai.Com ใน นสพ.ไทยรัฐ ครั้งที่ 2

เรื่อง : เมื่อ DwThai.Com ได้ลงหนังสือพิมพ์ไทยรัฐ เป็นครั้งที่ 2 ผมได้ทราบข่าวจากแฟนเว็บไซต์ท่านหนึ่งทาง MSN ว่า DwThai.C...  


Copyright ©2003-2019 dwthai.com. All rights reserved.
This website was created by : S.raksasuk.

ติดต่อ DwThai.Com

e-mail : dwthai@gmail.com
mobile: 08-9495-7296

เขียน Guestbook : DwThai.Com

*
*
*