การทดสอบเว็บเพจผ่าน browser จะต้องกดแป้นพิมพ์ปุ่มใด

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

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

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

Chrome

Internet Explorer (IE)

FireFox

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

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

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 :

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

เมื่อ : 30 มีนาคม 2559

|  ผู้เข้าชม : 172,487

เขียนโดย :

แชร์หน้าเว็บนี้ :

ทุกวันนี้คนส่วนใหญ่ก็ใช้คอมพิวเตอร์กันเป็นประจำอยู่แล้ว แต่หลายๆ คนก็อาจจะสงสัยว่าเจ้าปุ่ม F1 - F12 มันมีไว้ทำอะไร สามารถทำอะไรได้บ้าง เจ้าปุ่มพิเศษบนแป้นคีย์บอร์ดเหล่านี้ ก็คือปุ่ม Function keys หรือปุ่มฟังก์ชั่น เป็นทางลัดในการเรียกฟังก์ชันการทำงานต่างๆ ของเครื่องคอมพิวเตอร์ นั่นเอง

การทำงานของปุ่มเหล่านี้ จะคล้ายๆ กับคีย์ลัดที่ใช้กันเป็นประจำ อย่างเช่นปุ่ม Ctrl+C กดเพื่อ คัดลอก ปุ่ม Ctrl+X เพื่อ ตัด และ ปุ่ม Ctrl+V เพื่อ วาง ข้อความที่เราคัดลอกไว้นั่นเอง แต่สำหรับปุ่ม FN นั้นการทำงานจะแตกต่างกันไป ตามแต่ละโปรแกรม ที่เราใช้งาน แต่หลักๆ การใช้งานบนเครื่องคอมพิวเตอร์ของเรา สามารถสั่งงานได้หลากหลายรูปแบบเลยล่ะ จะมีอะไรบ้างเรามาดูกันเลย

F1

• เปิดตัวช่วยเหลือ (Help) คำอธิบายการใช้งาน ในแต่ละโปรแกรมที่ใช้อยู่

F2

• กดเพื่อเปลี่ยนชื่อไฟล์และโฟล์เดอร์ที่เราเลือกไว้ได้
• กดปุ่ม Alt + Ctrl + F2 พร้อมกันเพื่อสร้างไฟล์เอกสารใหม่ใน โปรแกรม Word ได้

F3

• ในหน้า Desktop หรือ Windows Explore สามารกดเพื่อค้นหาไฟล์และโฟลเดอร์ ได้
• เปิดช่องค้นหาตัวอักษรบนหน้าเว็บเบราวเซอร์ แทนการกดปุ่ม Ctrl+F ได้ (Firefox, Chrome และ IE)
• เลือกคำสั่งสุดท้ายที่เราพิมพ์ใน MS Dos 

F4

• สั่งปิดหน้าต่างโปรแกรมที่ใช้งานอยู่ด้วยการกดปุ่ม Alt + F4 หรือจะเปิดหน้าต่าง Shutdown บนหน้าจอกดได้
• บนหน้า Windows Explorer และ IE สามารถกดเพื่อเข้าไปพิมพ์ที่ช่อง address bar ได้ทันที

F5

• ใช้สำหรับรีเฟรช (Refresh) บนวินโดว์และในหน้าเบราวเซอร์ทุกตัว (หลายๆ คนคงรู้จักกันดี)
• กดแสดงหน้าสไลด์โชว์ (Slide show) ของโปรแกรม Power Point ได้
• เปิดหน้าต่างค้นหา Find and Replace ภายในโปรแกรมของ Microsoft Office เช่น Word, Excel เป็นต้น

F6

• บนหน้าจอ Desktop เมื่อกดปุ่ม F6 หน้าจอจะเลือกไฟล์ในหน้าจอ เลือก Taskbar และ system tray เหมือนเราเอาเมาส์ไปคลิกนั่นเอง ถือว่าเป็นทางลัดสำหรับคนที่เมาส์พังแล้วอยากจะใช้คีย์บอร์ดเลือกเมนูแทน
• สามารถกดเพื่อเข้าไปพิมพ์ที่ช่อง address bar ในเบราวเซอร์ได้ทันที
• สลับไปมาระหว่างตัวเลือกเมนู และ พื้นที่ทำงาน ของโปรแกรม Microsoft Office ชุดต่างๆ

F7

• ปุ่มนี้ไม่ได้ตั้งค่าอะไรสำหรับตัว windows ไว้จึงไม่สามารถสั่งการใน Windows ได้
• ใช้ตรวจสอบการสะกดคำและไวยากรณ์ในชุดโปรแกรม Microsoft Office อย่าง Word ,Outlook ได้
• เปิดการใช้งานปุ่มลูกศร ให้สามารถเลื่อนไปมาบนหน้าเว็บใน Mozilla Firefox ได้

F8

• เรียก Windows Start Menu ได้ (สำหรับ Windows 7)
• เข้าหน้า Windows แบบ Safe mode ตอนบูทเครื่องได้ (หลายคนคงใช้กันอยู่บ่อยๆ)

F9

• โปรแกรมเมอร์หลายคนคงคุ้นเคยกับปุ่ม F9 กันอย่างแน่นอน ปุ่มนี้ใช้สำหรับโปรแกรมเขียนโค้ดส่วนใหญ่ที่ใช้ปุ่ม F9 เพื่อ compiles และ run โค้ดใน combination ร่วมกับปุ่ม Ctrl นั่นเอง

F10

• กดเพื่อโชว์แถบเมนูในโปรแกรม Firefox และ IE หรือเลือกเน้นบางส่วนในโปรแกรมต่างๆ
• ใช้ Shift + F10 แทนการคลิกขวาในหน้าจอหรือโปรแกรมต่างๆ ได้

F11

• เปิดโหมด Full screen ขยายเต็มหน้าจอ ใน Windows Explorer และเบราวเซอร์ทุกๆ ตัวได้
• ในโปรแกรม Microsoft Excel เมื่อกดปุ่ม Shift + F11 สามารถสร้างชีท ใหม่ได้ และปุ่ม Ctrl + F11 สามารถกดเพิ่ม แถบ Marco ใหม่ได้อีกด้วย

F12

• กดบันทึกเป็น (Save as) ในหน้าต่างของโปรแกรมของ Microsoft Office ได้
• กดปุ่ม F12 เพื่อเรียกหน้า Inspect เป็นเครื่องมือสำหรับจัดการโค้ดบนหน้าเว็บไซต์เหมาะสำหรับนักพัฒนาเว็บไซต์สะดวกมากๆ
• กดปุ่ม Ctrl + Shift + F12 รวมกัน สามารถสั่งพิมพ์ในโปรแกรม Microsoft Office ต่างๆ ได้ (เหมือนการกดปุ่ม Ctrl + P) นั่นเอง

ที่มา : www.guidingtech.com