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

ภาพประกอบบทความเกี่ยวกับการตรวจสอบการทำงานของเครือข่ายของเว็บแอพพลิเคชั่น
ภาพประกอบบทความเกี่ยวกับการตรวจสอบการทำงานของเครือข่ายของเว็บแอพพลิเคชั่น
กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
วิธีการนำข้อความที่ผู้ใช้กรอกให้เข้าไปอยู่ในไฟล์ pdf ด้วยภาษา php
โดย jamepiyawat พ 29 ม.ค. 2020 6:53 pm บอร์ด PHP Knowledge
0
7
พ 29 ม.ค. 2020 6:53 pm โดย jamepiyawat
ติดตั้ง module flaskwebgui ไม่ได้ครับ
โดย benzas00123 พ 29 ม.ค. 2020 6:53 pm บอร์ด Programming - C/C++ & java & Python
0
5
พ 29 ม.ค. 2020 6:53 pm โดย benzas00123
ความรู้พื้นฐานเกี่ยวกับบัญชีแยกประเภท
โดย nutchasn พ 29 ม.ค. 2020 6:32 pm บอร์ด Accounting software & ERP โปรแกรมบัญชี ระบบอีอาร์พี
0
2
พ 29 ม.ค. 2020 6:32 pm โดย nutchasn
Pillow library ฟังก์ชั่น Image.new() ฟังก์ชั่นที่ใช้สำหรับการสร้างไฟล์รูปภาพ
โดย benzas00123 พ 29 ม.ค. 2020 6:21 pm บอร์ด Python Knowledge
0
4
พ 29 ม.ค. 2020 6:21 pm โดย benzas00123
ความรู้พื้นฐานเกี่ยวกับงบทดลอง (Taial Balance)
โดย nutchasn พ 29 ม.ค. 2020 6:00 pm บอร์ด Accounting software & ERP โปรแกรมบัญชี ระบบอีอาร์พี
0
8
พ 29 ม.ค. 2020 6:00 pm โดย nutchasn
Pillow library ฟังก์ชั่น ImageDraw() ฟังก์ชั่นสำหรับการเพิ่มตัวอักษรเข้าไปในภาพ
โดย benzas00123 พ 29 ม.ค. 2020 5:52 pm บอร์ด Python Knowledge
0
11
พ 29 ม.ค. 2020 5:52 pm โดย benzas00123
การปรับปรุงค่าใช้จ่ายจ่ายล่วงหน้า (Prepaid expenses)
โดย nutchasn พ 29 ม.ค. 2020 5:29 pm บอร์ด Accounting software & ERP โปรแกรมบัญชี ระบบอีอาร์พี
0
3
พ 29 ม.ค. 2020 5:29 pm โดย nutchasn
วิธีการเขียน php สำหรับตรวจสอบหมายเลขบัตรประชาชนว่ามีความถูกต้องหรือไม่
โดย Ittichai_chupol พ 29 ม.ค. 2020 5:24 pm บอร์ด PHP Knowledge
0
8
พ 29 ม.ค. 2020 5:24 pm โดย Ittichai_chupol
ทำความรู้จักกับชนิดข้อมูลใน SQL
โดย nutchasn พ 29 ม.ค. 2020 4:38 pm บอร์ด Accounting software & ERP โปรแกรมบัญชี ระบบอีอาร์พี
0
8
พ 29 ม.ค. 2020 4:38 pm โดย nutchasn
วิธีการปรับปรุงรายได้รับล่วงหน้า (Deferred Income)
โดย nutchasn พ 29 ม.ค. 2020 3:38 pm บอร์ด Accounting software & ERP โปรแกรมบัญชี ระบบอีอาร์พี
0
8
พ 29 ม.ค. 2020 3:38 pm โดย nutchasn
ผมไม่สามารถใช้ module tkinter ได้ครับ
โดย benzas00123 พ 29 ม.ค. 2020 2:04 pm บอร์ด Programming - C/C++ & java & Python
9
40
พ 29 ม.ค. 2020 6:57 pm โดย benzas00123
การปรับปรุงรายได้ค้างรับ (Accrued Revenue)
โดย nutchasn พ 29 ม.ค. 2020 2:09 pm บอร์ด Accounting software & ERP โปรแกรมบัญชี ระบบอีอาร์พี
0
9
พ 29 ม.ค. 2020 2:09 pm โดย nutchasn
ปิด textbox เพื่อให้ไม่สามารถแก้ไขข้อมูลได้ด้วย radio button
โดย benzas00123 พ 29 ม.ค. 2020 11:31 am บอร์ด HTML CSS
0
10
พ 29 ม.ค. 2020 11:31 am โดย benzas00123
อยากทราบวิธีการ insert ข้อมูลในตอนติดตั้ง Extension ของ phpbb
โดย Ittichai_chupol พ 29 ม.ค. 2020 11:03 am บอร์ด Programming - PHP
1
11
พ 29 ม.ค. 2020 11:08 am โดย thatsawan
เจอของจริง
โดย noppadonsk พ 29 ม.ค. 2020 10:58 am บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
8
พ 29 ม.ค. 2020 10:58 am โดย noppadonsk
อยากทราบวิธีแยกข้อมูลที่เรียงกันอย่างไม่เป็นระเบียบเข้า DB
โดย meetingyou999 อ 28 ม.ค. 2020 10:37 pm บอร์ด Programming - PHP
0
14
อ 28 ม.ค. 2020 10:37 pm โดย meetingyou999
Pillow library ฟังก์ชั่น Filters สำหรับการปรับ Filters ของภาพให้มีลูกเล่นมากขึ้น
โดย benzas00123 อ 28 ม.ค. 2020 6:52 pm บอร์ด Python Knowledge
0
26
อ 28 ม.ค. 2020 6:52 pm โดย benzas00123
เรียนรู้การใช้สูตรจาก Excel
โดย nutchasn อ 28 ม.ค. 2020 6:51 pm บอร์ด Accounting software & ERP โปรแกรมบัญชี ระบบอีอาร์พี
0
14
อ 28 ม.ค. 2020 6:51 pm โดย nutchasn
Pillow library ฟังก์ชั่น convert ฟังก์ชั่นสำหรับเปลี่ยนโหมดสีของภาพ
โดย benzas00123 อ 28 ม.ค. 2020 6:40 pm บอร์ด Python Knowledge
0
13
อ 28 ม.ค. 2020 6:40 pm โดย benzas00123
ทำความรู้จักโปรแกรม power bi ในการวิเคราะห์ข้อมูล
โดย nutchasn อ 28 ม.ค. 2020 4:30 pm บอร์ด Accounting software & ERP โปรแกรมบัญชี ระบบอีอาร์พี
0
10
อ 28 ม.ค. 2020 4:30 pm โดย nutchasn