ให้เรตสมาชิก: 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 ตรวจสอบการทำงานของหน้าเว็บ

ภาพประกอบบทความเกี่ยวกับการตรวจสอบการทำงานของเครือข่ายของเว็บแอพพลิเคชั่น
ภาพประกอบบทความเกี่ยวกับการตรวจสอบการทำงานของเครือข่ายของเว็บแอพพลิเคชั่น
กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
การใช้ text-align เพื่อจัดข้อความ
โดย bankjittapol ศ 22 พ.ย. 2019 6:28 pm บอร์ด CSS Knowledge
0
3
ศ 22 พ.ย. 2019 6:28 pm โดย bankjittapol
อยากทราบคำสั่ง joomla ที่จะทำให้ย่อยรูปได้ครับ
โดย jamepiyawat ศ 22 พ.ย. 2019 5:53 pm บอร์ด Joomla Development
0
5
ศ 22 พ.ย. 2019 5:53 pm โดย jamepiyawat
วิธีการการใช้งาน jquery เพื่อปรับเปลี่ยนค่า css ให้กับปุ่มเมื่อมีการคลิก
โดย Ittichai_chupol ศ 22 พ.ย. 2019 5:41 pm บอร์ด Jquery & Ajax Knowledge
0
3
ศ 22 พ.ย. 2019 5:41 pm โดย Ittichai_chupol
การใส่ Intro Outro และการตัดต่อ VDO ด้วยโปรแกรม โปรแกรม Sony Vagas Pro
โดย numtan5839 ศ 15 พ.ย. 2019 1:41 pm บอร์ด Graphic design
0
6
ศ 15 พ.ย. 2019 1:41 pm โดย numtan5839
ข้อดีข้อเสียของ SAP
โดย kanchanok พฤ 05 เม.ย. 2018 9:31 am บอร์ด Accounting software & ERP โปรแกรมบัญชี ระบบอีอาร์พี
1
2220
ศ 22 พ.ย. 2019 4:57 pm โดย mindphp
วิธีการเปลี่ยนการแสดงผล ส่วนการจัดการกระทู้ที่ติดตาม ของ phpbb
โดย Ittichai_chupol ศ 22 พ.ย. 2019 4:07 pm บอร์ด PHP Knowledge
0
5
ศ 22 พ.ย. 2019 4:07 pm โดย Ittichai_chupol
.net ถ้าจะใช้ Entity Framework โดยไม่ต้องลงตัว Oracle Data Access Client (ODAC)
โดย jataz2 ศ 22 พ.ย. 2019 3:23 pm บอร์ด Programming - C/C++ & java & Python
0
9
ศ 22 พ.ย. 2019 3:23 pm โดย jataz2
โปรแกรมหาค่าเฉลี่ย, ค่าแปรปรวน และค่าเบี่ยงเบนมาตรฐาน
โดย prmindphp ศ 22 พ.ย. 2019 10:40 am บอร์ด MindPHP News / Feedback
0
17
ศ 22 พ.ย. 2019 10:40 am โดย prmindphp
โปรแกรมคำนวณสแควรูท - โปรแกรมช่วยหาค่า รากที่ สอง สาม สี่... ของจำนวนที่ต้องการ
โดย prmindphp ศ 22 พ.ย. 2019 10:23 am บอร์ด MindPHP News / Feedback
0
37
ศ 22 พ.ย. 2019 10:23 am โดย prmindphp
พาสปอร์ตด่วนพิเศษ บินไวไฟลุก จ่าย 3,000.- รับเล่มภายในไม่กี่ชั่วโมง
โดย promotion ศ 22 พ.ย. 2019 10:19 am บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
8
ศ 22 พ.ย. 2019 10:19 am โดย promotion
งานประจำวันที่ 22 พฤศจิกายน 2562
โดย numtan5839 ศ 22 พ.ย. 2019 9:36 am บอร์ด M097 - ตรีเนตร บูรณโพธิ์ทอง
6
24
ศ 22 พ.ย. 2019 6:58 pm โดย numtan5839
บันทึกการประชุม OpenERP MD-ERP
โดย rinrada ส 04 ก.พ. 2017 11:52 am บอร์ด OpenERP - MD-ERP (Main)
26
173
พฤ 21 พ.ย. 2019 6:56 pm โดย thatsawan
การใช้ ฟังก์ชัน hsl() และ hsal () กำหนดค่าของสี
โดย bankjittapol พฤ 21 พ.ย. 2019 6:55 pm บอร์ด CSS Knowledge
0
24
พฤ 21 พ.ย. 2019 6:55 pm โดย bankjittapol
วิธีการแยกตัวอักษรเข้าอาร์เรย์ (Array) แต่ล่ะอาร์เรย์ ด้วยคำสั่ง split
โดย jamepiyawat พฤ 21 พ.ย. 2019 6:50 pm บอร์ด Jquery & Ajax Knowledge
0
20
พฤ 21 พ.ย. 2019 6:50 pm โดย jamepiyawat
วิธีการดึงค่าเฉพาะค่าสุดท้ายของ class แม้ว่าจะมี class ชื่อเหมือนกัน หลายคลาส โดย javascript
โดย Ittichai_chupol พฤ 21 พ.ย. 2019 6:39 pm บอร์ด Jquery & Ajax Knowledge
0
27
พฤ 21 พ.ย. 2019 6:39 pm โดย Ittichai_chupol
การติดตั้ง wkhtmltopdf ด้วย terminal บน ubuntu
โดย jirawoot พฤ 27 มิ.ย. 2019 4:00 pm บอร์ด Linux - Web Server
3
719
พฤ 21 พ.ย. 2019 2:49 pm โดย mindphp
การปรับแก้ไข(Overrides) Modules ใน Template
โดย bankjittapol พฤ 21 พ.ย. 2019 2:36 pm บอร์ด Joomla Developing Knowledge
0
19
พฤ 21 พ.ย. 2019 2:36 pm โดย bankjittapol
wkhmtltopdf คืออะไร
โดย jirawoot พ 03 ก.ค. 2019 6:35 pm บอร์ด Share Knowledge
1
229
พฤ 21 พ.ย. 2019 2:34 pm โดย mindphp
อัพเกรด wkhtmltopdf บน Ubuntu 16.04
โดย mindphp พฤ 21 พ.ย. 2019 2:33 pm บอร์ด Linux - Web Server
0
18
พฤ 21 พ.ย. 2019 2:33 pm โดย mindphp
VDO - โปรแกรมแปลงพื้นที่
โดย numtan5839 พฤ 21 พ.ย. 2019 1:59 pm บอร์ด M097 - ตรีเนตร บูรณโพธิ์ทอง
4
29
ศ 22 พ.ย. 2019 6:40 pm โดย numtan5839