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

ภาพประกอบบทความเกี่ยวกับการตรวจสอบการทำงานของเครือข่ายของเว็บแอพพลิเคชั่น
ภาพประกอบบทความเกี่ยวกับการตรวจสอบการทำงานของเครือข่ายของเว็บแอพพลิเคชั่น
กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
แก้ปัญหา ส่งเมลไม่ออก Roundcube: SMTP Error (-1): Connection to server failed.
โดย mindphp อ 18 ก.พ. 2018 6:16 pm บอร์ด Linux - Web Server
1
1
อ 18 ก.พ. 2018 6:35 pm โดย mindphp
ปัญหาเมล Mail Server exim Start ไม่ขึ้น บน Ubuntu
โดย mindphp อ 18 ก.พ. 2018 5:40 pm บอร์ด Linux - Web Server
1
1
อ 18 ก.พ. 2018 5:46 pm โดย mindphp
โหลดไฟล์ joomshopping ไม่ได้
โดย Jao SaCk อ 18 ก.พ. 2018 4:33 am บอร์ด Joomla Development
1
5
อ 18 ก.พ. 2018 2:08 pm โดย mindphp
ช่วยด้วยค่ะหนูต้องการให้ตั้งเงื่อนไขให้เอาค่าdefaultที่เลือกอยู่ใน listbox มาแสดงเป็นข้อความหนูต้องทำอย่างไรค่ะ
โดย Parichat ส 17 ก.พ. 2018 11:11 pm บอร์ด Joomla Development
1
22
อ 18 ก.พ. 2018 2:10 pm โดย mindphp
อยากทราบคำสั่งสำหรับวนลูปในการคลิกเลือกหน้าถัดไป
โดย Panchalee ส 17 ก.พ. 2018 6:40 pm บอร์ด Programming - C/C++ & java & Python
0
22
ส 17 ก.พ. 2018 6:40 pm โดย Panchalee
วิธีการติดตั้งเวอร์ชั่น php ในโปรแกรม Laragon
โดย Parichat ส 17 ก.พ. 2018 6:31 pm บอร์ด PHP Knowledge
0
24
ส 17 ก.พ. 2018 6:31 pm โดย Parichat
ปัญหาเรื่องบทความComponent, Module และ Plug in แตกต่างกันอย่างไร
โดย alisa93 ส 17 ก.พ. 2018 11:33 am บอร์ด ปัญหาการใช้ phpBB3, SMF, Joomla, Wordpress, CMS CRM
1
24
ส 17 ก.พ. 2018 2:27 pm โดย mindphp
ปัญหาเรื่องบทความ Joomla Extension
โดย alisa93 ส 17 ก.พ. 2018 10:56 am บอร์ด ปัญหาการใช้ phpBB3, SMF, Joomla, Wordpress, CMS CRM
1
30
ส 17 ก.พ. 2018 2:34 pm โดย mindphp
Selenium : คำสั่งสำหรับเช็ค Error ความสมบูรณ์ที่หน้าเว็บ
โดย Panchalee ศ 16 ก.พ. 2018 3:53 pm บอร์ด Software testing
0
17
ศ 16 ก.พ. 2018 3:53 pm โดย Panchalee
การสร้าง URL ให้แสดงทั้งไอดีทั้งจังหวัดต้องทำอย่างไรค่ะ
โดย Parichat ศ 16 ก.พ. 2018 2:40 pm บอร์ด Joomla Development
1
27
ศ 16 ก.พ. 2018 2:50 pm โดย tsukasaz
การสร้าง URL ให้แสดงทั้งลิ้งทั้งจังหวัดต้องทำอย่างไรค่ะ
โดย Parichat ศ 16 ก.พ. 2018 2:39 pm บอร์ด Joomla Development
3
34
ศ 16 ก.พ. 2018 3:23 pm โดย Parichat
อยากทราบคำสั่งสำหรับการเช็ค Error ในกรณีที่หน้าเว็บโหลดขึ้นไม่ครบ
โดย Panchalee ศ 16 ก.พ. 2018 2:14 pm บอร์ด Programming - C/C++ & java & Python
1
26
ศ 16 ก.พ. 2018 2:16 pm โดย thatsawan
ความเเตกต่าง ระหว่าง python 2 - python 3
โดย Jom07 ศ 16 ก.พ. 2018 1:48 pm บอร์ด Python Knowledge
0
33
ศ 16 ก.พ. 2018 1:48 pm โดย Jom07
Selenium : การใช้คำสั่งวนลูปใน xpath
โดย Panchalee ศ 16 ก.พ. 2018 1:44 pm บอร์ด Software testing
0
25
ศ 16 ก.พ. 2018 1:44 pm โดย Panchalee
จะขอถามเรื่องการเข้าไปดูผลลัพธ์ที่สร้าง Component ที่ชื่อว่า OS Responsive Image Gallery ยังไงค่ะ
โดย Parichat ศ 16 ก.พ. 2018 1:35 pm บอร์ด Joomla Development
2
32
ศ 16 ก.พ. 2018 1:55 pm โดย Parichat
OS Responsive Image Gallery(โอเอส เรสปอน์ซีฟอิมเมดแกลเลอรี่)-Component แกลเลอรี Joomla ที่เรียบง่าย
โดย Parichat ศ 16 ก.พ. 2018 1:29 pm บอร์ด Joomla Extension Review
0
21
ศ 16 ก.พ. 2018 1:29 pm โดย Parichat
การ์ดจอ กับ สโมสร ลิเวอร์พูล
โดย Before Dong ศ 16 ก.พ. 2018 10:33 am บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
1
29
ศ 16 ก.พ. 2018 2:07 pm โดย jobyjob
สอบถามค่ะ การยื่นภงด.1ก ยืนไม่ตรงกับภงด 1 ใบแนบเเต่ละเดือนเป็นไปได้มั้ยค่ะ
โดย thatsawan ศ 16 ก.พ. 2018 10:09 am บอร์ด ถาม - ตอบ ธุรกิจ กฏหมาย ภาษี บัญชี
3
26
ศ 16 ก.พ. 2018 10:15 am โดย atipornh
การทำ webdriver บน Python GUI (Tkinter)
โดย Jom07 พฤ 15 ก.พ. 2018 6:48 pm บอร์ด Software testing
0
37
พฤ 15 ก.พ. 2018 6:48 pm โดย Jom07
ติดตั้ง Template ลงใน Joomle ไม่ได้ค่ะ
โดย Parichat พฤ 15 ก.พ. 2018 2:47 pm บอร์ด Joomla Development
4
31
พฤ 15 ก.พ. 2018 3:19 pm โดย Parichat