ให้เรตสมาชิก: 4 / 5

ดาวใช้งานดาวใช้งานดาวใช้งานดาวใช้งานดาวไม่ได้ใช้งาน
 

Chrome developer tools (โครม ดิวิลอปเปอร์ ทูล) เครื่องมือที่ให้สำหรับตรวจสอบ หรือหาจุดบกพร่องของเว็บแอพพลิเคชั่นของเรา

             สำหรับนักพัฒนาและออกแบบเว็บแอพพลิเคชั่นนั้นก็มักจะต้องมีการตรวจสอบการทำงานของเว็บไซต์ของตนเองว่ามีการแสดงผลและการทำงานเป็นไปตามที่ต้องการหรือไม่ หรืออาจจะต้องมีการแก้ไข หรือปรับปรุงให้ระบบและการแสดงผลมีการทำงานที่สมบูรณืมากยิ่งขึ้น สำหรับบทความนี้จะขอแนะนำเครื่องมีที่จะช่วยให้นักพัฒนาเว็บแอพพลิเคชั่นให้สำหรับส่วนสอบและหาข้อบกพร่องของการทำงานของเว็บแอพพลิเคชั่นที่เราได้พัฒนาขึ้นมา

             Chrome developer tools เป็นเครื่องมือที่ให้สำหรับตรวจสอบ หรือหาจุดบกพร่องของเว็บแอพพลิเคชั่นของเรา ซึ่งเราสามารถใช้งานเครื่องมือสำหรับนักพัฒนา เพื่อติดตามปัญหา โดยสามารถเลือกเมนู Tools เครื่องมือสำหรับนักพัฒนา หรือกด ctrl + shift + i หรือเพียงกด F12 เพื่อเปิดใช้งาน เครื่องมือ Developer tools

องค์ประกอบของเครื่องมือใน  Chrome developer tools  จะประกอบด้วย

1. Elements (อิลีเม้น) องค์ประกอบหน้าเว็บแอพพลิเคชั่น
2. Resources (รีซอซ) ทรัพยากรระบบต่างๆ
3. Network (เน็ตเวิร์ค) ข้อมูลด้านเครือข่าย
4. Source (ซอสต์) แหล่งที่มา
5. Timeline (ไทม์ไลน์) เส้นแสดงเวลาการทำงาน การประมวลผล การแสดงผล
6. Profile (โปรไฟล์) ข้อมูลส่วนตัว
7. Audits (ออดิด) เครื่องมือตรวจสอบ
8. Console (คอนโซล) คอนโซลตรวจสอบองค์ประกอบ
9. Emulation (อิมูเลชั่น) การจำลองเครื่องมือ และสภาพแวดล้อม
10. Media Queries (มีเดีย คิวรี่) การเรียกใช้งาน และการแสดงลักษณะ Style Sheets (สไตล์ชีต) ของแต่ละขนาดหน้าจอ

             ตัวอย่างเช่น เราต้องการที่จะตรวจสอบการทำงานด้านเครือข่ายบนเว็บแอพพลิเคชั่นของเรา ให้เราเปิดเว็บแอพของเราขึ้นมา จากนั้นเปิด Developer tools เลือกเครื่องมือเป็น network ซึ่งในขณะที่เรากำลังใช้งานในหน้าเว็บเพจอยู่นั้น ในส่วนของ Network ที่เราเปิดแถบไว้ก็จะแสดงผลการทำงานในระบบขึ้นมาให้เราได้ตรวจสอบ

หมายเลข 1 หลังจากกดเข้าสู่ Developer tools แล้วให้กดเลือกเมนู Network

หมายเลข 2 ตรวจสอบการทำงานของหน้าเว็บ

ภาพประกอบบทความเกี่ยวกับการตรวจสอบการทำงานของเครือข่ายของเว็บแอพพลิเคชั่น
ภาพประกอบบทความเกี่ยวกับการตรวจสอบการทำงานของเครือข่ายของเว็บแอพพลิเคชั่น
กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
B - เข้าเมนูหน้ารวมรายการใน admin ไม่ได้
โดย thatsawan ศ 29 พฤษภาคม 2020 5:58 pm บอร์ด Odoojob.com - Tester
0
1
ศ 29 พฤษภาคม 2020 5:58 pm โดย thatsawan
B - ยังขาดหน้าผลการค้นหา จาก search.php
โดย mindphp ศ 29 พฤษภาคม 2020 6:11 am บอร์ด FDD (Main)
0
1
ศ 29 พฤษภาคม 2020 6:11 am โดย mindphp
B - กล่องค้นหาจากหน้า index ใช้งานไม่ได้ กดแล้วไม่ไปหน้าค้นหา
โดย mindphp ศ 29 พฤษภาคม 2020 5:39 am บอร์ด FDD (Main)
1
1
ศ 29 พฤษภาคม 2020 5:53 am โดย mindphp
B - ไม่ใช่แค่โชว์ icon facebook มันต้องทำลิงค์เพื่อให้คลิกไป
โดย mindphp ศ 29 พฤษภาคม 2020 4:39 am บอร์ด FDD (Main)
1
2
ศ 29 พฤษภาคม 2020 4:51 am โดย mindphp
อัพเดท phpbb 3.3 เเล้ว extenstion ใช้งานไม่ได้
โดย thatsawan พฤ 28 พฤษภาคม 2020 10:08 pm บอร์ด ปัญหาการใช้ phpBB3, SMF, Joomla, Wordpress, CMS, CRM
1
16
พฤ 28 พฤษภาคม 2020 10:10 pm โดย thatsawan
วิธีการสร้าง css ที่ใช้งานเฉพาะในบราวเซอร์ safari เท่านั้น
โดย Ittichai_chupol พฤ 28 พฤษภาคม 2020 6:06 pm บอร์ด CSS Knowledge
0
7
พฤ 28 พฤษภาคม 2020 6:06 pm โดย Ittichai_chupol
R - Set Demo เป็น subdomain ของ ตัวนี้
โดย mindphp พฤ 28 พฤษภาคม 2020 6:17 am บอร์ด มารียา ซีฟู้ดส์ - Developer
0
8
พฤ 28 พฤษภาคม 2020 6:17 am โดย mindphp
อยากทราบวิธีการกำหนด ค่า css ให้กับ button โดยกำหนดเฉพาะแต่ละบราวเซอร์
โดย Ittichai_chupol พ 27 พฤษภาคม 2020 8:39 pm บอร์ด HTML CSS
1
24
พ 27 พฤษภาคม 2020 9:15 pm โดย mindphp
อัพเดท Changelog flask framework ของภาษา Python
โดย jirawoot พ 27 พฤษภาคม 2020 12:19 pm บอร์ด Python Knowledge
0
19
พ 27 พฤษภาคม 2020 12:19 pm โดย jirawoot
งานประจำวันที่ 27 พฤษภาคม 2563
โดย yositacha26 พ 27 พฤษภาคม 2020 12:13 pm บอร์ด MP011 - โยษิตา จันทะวงษ์
1
25
พ 27 พฤษภาคม 2020 12:15 pm โดย yositacha26
อยากทราบว่า วิธีการกำหนดการตั้งค่า ภาษาไทย ใน Netbeans
โดย Ittichai_chupol พ 27 พฤษภาคม 2020 10:13 am บอร์ด ถาม - ตอบ คอมพิวเตอร์
0
18
พ 27 พฤษภาคม 2020 10:13 am โดย Ittichai_chupol
B - บริษัท approve ประวัติที่ส่งมาสมัครเเล้ว เเต่ยังแสดงสถานะเดิมอยู่
โดย thatsawan อ 26 พฤษภาคม 2020 6:27 pm บอร์ด Odoojob.com - Tester
0
4
อ 26 พฤษภาคม 2020 6:27 pm โดย thatsawan
อยากทราบวิธีการแก้ไข ภาษาไทยกลายอักษรแปลกๆ
โดย Ittichai_chupol จ 25 พฤษภาคม 2020 4:35 pm บอร์ด Programming - PHP
1
41
จ 25 พฤษภาคม 2020 5:43 pm โดย thatsawan
อยากทราบวิธีการ แบบคอลัมเป็น 3 คอลีม โดยใช้ tag <dl>
โดย Ittichai_chupol จ 25 พฤษภาคม 2020 11:56 am บอร์ด HTML CSS
1
44
จ 25 พฤษภาคม 2020 2:42 pm โดย thatsawan
บันทึกประชุม มารียา ซีฟู้ดส์
โดย thatsawan จ 25 พฤษภาคม 2020 11:40 am บอร์ด มารียา ซีฟู้ดส์ (Main)
2
12
ศ 29 พฤษภาคม 2020 9:32 am โดย tsukasaz
10 สุดยอดสตรีทฟู้ดในแอฟริกาตะวันตก
โดย Anonymous อ 24 พฤษภาคม 2020 9:58 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
1
57
จ 25 พฤษภาคม 2020 8:03 pm โดย ขุนพล ตั้นตระกูล
ข้อมูลสำหรับทำระบบ
โดย mindphp อ 24 พฤษภาคม 2020 4:07 am บอร์ด มารียา ซีฟู้ดส์ (Main)
0
10
อ 24 พฤษภาคม 2020 4:07 am โดย mindphp
อัพเดดความคืบหน้า / Progress - มารียา ซีฟู้ดส์
โดย mindphp อ 24 พฤษภาคม 2020 4:07 am บอร์ด มารียา ซีฟู้ดส์ (Main)
3
22
ศ 29 พฤษภาคม 2020 2:25 pm โดย thatsawan
อัพเดด Template เว็บไซต์ FDD (V2)
โดย mindphp อ 24 พฤษภาคม 2020 3:51 am บอร์ด FDD (Main)
0
1
อ 24 พฤษภาคม 2020 3:51 am โดย mindphp
R - ปรับกราฟฟิก ของเว็บ FDD
โดย mindphp อ 24 พฤษภาคม 2020 3:50 am บอร์ด FDD (Main)
0
2
อ 24 พฤษภาคม 2020 3:50 am โดย mindphp