ស្វែងយល់​អំពី Googel Chrome Devtools

Chrome Developer Tools ឬ​ក៏ DevTools គឺ​ជា​ឧបករណ៍​ក្នុង​ការ​គ្រប់គ្រង និង debug កូដ​គេហទំព័រ​ ដែល​ត្រូវ​បាន​ដាក់​ភ្ជាប់​មក​ជាមួយ​នឹង​កម្មវិធី Browser Google Chrome ផ្ទាល់​តែ​ម្តង ។ ឧបករណ៍​ DevTools នេះ អនុញ្ញាត​ឲ្យ​អ្នក​អភិវឌ្ឃគេហទំព័រ (Web Developer) ចូល​ទៅ Access ក្នុងផ្នែកខាងក្នុង​របស់ web page ព្រមជាមួយ​នឹង Web Application របស់​ពួក​គេ​បាន​យ៉ាង​ងាយ ។ ដោយ​ប្រើប្រាស់ DevTools លោកអ្នក​អាច​នឹងស្វែងរក​បាន​រហ័ស​នូវ​បញ្ហា​ជាមួយ layout, ការ​កំណត់ breakpoint សម្រាប់ JavaScript និងការ​យល់​ដឹង​យ៉ាង​ច្បាស់​អំពី code optimization ជាដើម ។

feature img

របៀប​ចូល​ទៅ​ប្រើប្រាស់ DevTools

ដើម្បី​ចួល​ទៅ​ប្រើប្រាស់វា​បាន លោកអ្នក​នឹង​ត្រូវ​បើក​គេហទំព័រ​មួយ​សិន និង​បន្ទាប់​មក​លោកអ្នក​អាច៖

  • ចុច​នៅ​លើ icon របស់ Chrome menu   នៅ​ខាង​លើ ខាង​ស្ដាំ​ដៃ បន្ទាប់​មក​ចុច Tools > Developer Tools ឬ​ក៏
  • ចុច Right-click នៅ​លើ​ផ្នែក (element) ផ្សេងៗ​របស់​គេហទំព័រ និង​ជ្រើសរើស​យក Inspect Element។

ផ្ទាំង​របស់​ឧបករណ៍​នេះ​នឹង​បើក​បង្ហាញ​ឡើង​នៅ​ខាង​ផ្នែក​ខាង​ក្រោម​របស់ Chrome browser របស់​លោកអ្នក ។

1 enter the tools

គួរ​រំឮក​ផង​ដែរ​ថា ប្រសិន​បើ​លោកអ្នក​​ចង់​ទទួល​បាន​កំណែ​ប្រែ​ចុង​ក្រោយ​របស់ DevTools លោកអ្នក​អាច​នឹង​ចូល​ទៅ​ទាញយក​ Google Chrome Canary នៅទីនេះ ។

អំពី​គ្រាប់​ចុច​ផ្លូវ​កាត់ (Shortcut Keys)

ខាង​ក្រោម​ជា​ shortcut keys មួយ​ចំនួន​ ដែល​លោកអ្នក​អាច​ប្រើប្រាស់​ក្នុង​ការ​ចូលទៅ access បាន​លឿន​ រហ័ស៖

  • ចុច Ctrl+Shift+I ឬក៏ Cmd+Opt+I (សម្រាប់ Mac) ដើម្បី​បើក​ផ្ទាំង DevTools
  • ចុច Ctrl+Shift+J ឬក៏ Cmd+Opt+J (សម្រាប់ Mac) ដើម្បី​បើក​ចូល​ផ្នែក Console ដោយ​ផ្ទាល់
  • ចុច Ctrl+Shift+C ឬក៏ Cmd+Shift+C (សម្រាប់ Mac) tដើម្បី​បើក​ចូល​ក្នុង​ Inspect Element ដោយ​ផ្ទាល់ ។

សម្រាប់​ shortcut ជា​ច្រើន​ទៀត​ លោកអ្នក​អាច​ចូល​ទៅ​មើល​ ទីនេះ ។

2 Keyboard Shortcuts   Google Chrome

DevTools បាន​រៀប​ចំ​ការងារ​ជា​ផ្នែក​ៗ ដោយ​មាន​ជារបារឧបករណ៍ (toolbar) នៅ​ផ្នែក​ខាង​លើ​នោះ។ ផ្នែក​នីមួយ​អាច​ឲ្យ​លោកអ្នក​ធ្វើ​ការ​ជា​មួយ​នឹង​បញ្ហា ឬ​តម្រូវ​ការ​ជាក់លាក់​ដែល​លោកអ្នក​ចង់​ស្វែងរក​ដូចជា DOM elements, resources, sources.. ជាដើម ។

devtools-window

ការ​ត្រួត​ពិនិត្យ Document Object Model (DOM) និង styles

ផ្ទាំង Elements អនុញ្ញាតឲ្យ​លោកអ្នក​មើល​ឃើញ​អ្វីៗ​គ្រប់​យ៉ាង​អំពី​ធាតុ​ផ្សេងៗជា​លក្ខណៈ tree view ដែល​បង្ក​ជាភាព​ងាយ​ស្រួល​និង​ឆាប់​រហ័ស។ លោកអ្នក​​​អាច edit កូដ​ ដែល​ផ្ទាល់​នៅ​ក្នុង​នោះ​បាន​ ដោយ​គ្រាន់​តែ​ចុច double click នៅ​លើ tag ឬ element នោះ សម្រាប់​កែ​តម្លៃ ឬក៏ right-click និង​ជ្រើសរើសយក Edit as HTML ដើម្បី​កែ​កូដ HTML តែ​ម្ដង ។ សម្រាប់មុខងារ​លម្អិត​បន្ថែម លោកអ្នក​អាច​ចូល​ទៅ​កាន់​ ទីនេះ ។

elements-panel

អំពី​ការ​ប្រើប្រាស់ Console

JavaScript Console នឹង​ផ្ដល់​មុខងារ​សំខាន់​ពីរ​យ៉ាង​សម្រាប់ developer ក្នុង​ការ​ធ្វើ​តេស្ដ​សាកល្បង​គេហទំព័រ​ ក៏​ដូច​ជា web applications របស់​គាត់៖

  • ជា​កន្លែង​រក្សា​ផ្ទុក​ទៅ​ដោយ​ព័ត៌មានសកម្មភាព​ log ដោយ​ប្រើប្រាស់ methods ដែល​មាន​នៅ​ក្នុង Console API ដូច​ជា console.log(), ឬ console.profile() ជាដើម។
  • ជាកន្លែង​មួយ​ដែល​លោកអ្នក​អាច​វាយ​បញ្ចូល​នូវ commands ដើម្បី​ធ្វើ​​​ការ​ប្រើប្រាស់ DevTools ​ជាមួយ​នឹង files ឯកសារ​ផ្សេងៗ។ លោកអ្នក​អាច​ប្រើប្រាស់ methods ដែល​មាន​នៅ​ក្នុង Command Line API ដូចជា $() ដែល​ជា command សម្រាប់​ធ្វើ​ការ​ select នូវ elements ជាដើម។

សម្រាប់មុខងារ​លម្អិត​បន្ថែម​អំពី​ការ​ប្រើប្រាស់ console លោកអ្នក​អាច​ចូល​ទៅ​កាន់​ ទីនេះ ។

evaluate-expressions

អំពី​ការ Debug JavaScript

លោកអ្នក​អាច​ប្រើប្រាស់ផ្ទាំង Sources ក្នុង​ការ debug JavaScript បានកាន់​តែ​រហ័ស​ និង​ងាយ​ស្រួល​ជាមួយ​នឹង​ឧបករណ៍​ជំនួយ​ជា​ច្រើន ។ វា​អាច​ឲ្យ​លោកអ្នក​ view មើល​នូវ Scripts ទាំង​អស់​ដែល​ជា​ផ្នែក​នៅ​ក្នុង page នោះ ហើយ​កាន់តែ​ពិសេស​ជា​មួយ​នឹង controls ដូច​ជា pause, resume, ឬ step ដែល​អាច​ជួយ​លោកអ្នក​ក្នុង​ការគ្រប់គ្រង​ដំណើរ​ការ​នៃ​កូដ​បាន​យ៉ាង​ងាយ។ ព័ត៌មានបន្ថែម​អំពី​ដំណើរការ​ក្នុង​ការ debug JavaScript លោកអ្នក​អាចចូលទៅ​ទីនេះ ។

javascript-debugging-overview

អំពី Network Performance

Network ជាផ្ទាំង​មួយ ដែល​អាច​ឲ្យ​លោកអ្នក​ពិនិត្យ​មើល​នូវ resources ដែល​ត្រូវ​បាន download នៅ​លើ​បណ្ដាញ network ក្នុង​ពេល​នោះផ្ទាល់ (Real Time) ។ លោកអ្នក​អាចពិនិត្យ​ និង Optimize នូវ Page របស់​លោកអ្នក​បន្ថែម​ ប្រសិន​បើ​ការ Identify និង Address នូវ​ការ Request ទាំង​នោះ​ត្រូវ​ការ​រយៈ​ពេល​យូរ​ជា​ដើម ។ ដើម្បី​ស្វែង​យល់អំពី​ចំណុច​នេះ​បន្ថែម សូម​ចុច​ទី​នេះ

network-panel

អំពី​ផ្ទាំង Audit

ផ្ទាំង Audit អាច​ឲ្យ​លោកអ្នក​ពិនិត្យ​ វិភាគ ចំពោះ​ page មួយ ដោយ​ផ្អែក​លើ​ការ load ឡើង​មក​របស់​វា និង​ផ្ដល់​នូវមតិយោបល់ ដើម្បី​កាត់​បន្ថយ​ឲ្យ​បាន​កាន់តែ​លឿន នូវ​ពេល​វេលា​ក្នុង​ការ load page។ ដើម្បី​ធ្វើ​ការ​ត្រួត​ពិនិត្យ​បាន​កាន់តែ​ប្រសិន លោកអ្នក​អាច​នឹង​ដំឡើង extension ឈ្មោះ PageSpeed ជា​ជំនួយ ។

Make the Web Faster — Google Developers

អំពី​ Rendering Performance

ចំណែក​ឯ​ផ្ទាំង Timeline វិញ លោកអ្នក​អាច​ពិនិត្យ​មើល​បាន​ថា កន្លែង​ណា​ដែល​​បាន​ប្រើប្រាស់​ច្រើន ក្នុង​ការ load នូវ Web App ឬក៏ page របស់​លោកអ្នក ។​ គ្រប់ event ទាំង​អស់​ មិន​ថា loading resources, parsing JavaScript, calculating styles, ឬ​ក៏ repainting នោះ​ទេ គឺ​សុទ្ធ​តែ​ត្រូវ​បាន​ដាក់​បង្ហាញ​នៅ​លើ timeline ទាំង​អស់។ បើ​លោកអ្នក​ចង់​ដឹង​អំពី​ផ្ទាំង​នេះ​លម្អិត​បន្ថែម សូម​ចុច​ទីនេះ ។

timeline-panel

អំពី JavaScript & CSS performance

ចំពោះផ្ទាំង Profiles វិញ អាច​ឲ្យ​លោកអ្នក​ពិនិត្យ​មើល​រយៈពេល​ក្នុង​ការ execution ព្រម​ជាមួយ​នឹង​ការ​ប្រើប្រាស់ memory របស់ Web App ឬក៏ Page របស់​លោកអ្នក ។ ផ្ទាំង Profiles នេះ ត្រូវ​បាន​ដាក់​បញ្ចូល​មក​​ជាមួយ​នូវ profiler មួយ​ចំនួន​ផង​ដែរ ដូចជា CPU profiler, JavaScript profiler និង Heap profiler។ ហើយ​នេះ​នឹង​ជួយ​លោកអ្នក​ក្នុង​ការ​ស្វែងយល់​បាន​កាន់​តែ​ច្បាស់​ ថាតើ resources កំពុង​ត្រូវ​បាន​ប្រើប្រាស់​នៅ​កន្លែង​ណា ហើយ​ក៏​នឹង​ជួយ​សម្រួល​ដល់​ការoptimize កូដ​របស់​លោកអ្នក​ផង​ដែរ។

  • CPU profiler បង្ហាញ​ប្រាប់​លោកអ្នក​ នូវ​កន្លែង​ដែលប្រើប្រាស់​​ពេល​ក្នុង​ការ execution ច្រើន​ ក្នុង JavaScript function របស់​លោកអ្នក​។
  • ចំពោះ Heap profiler នឹង​បង្ហាញ​ប្រាប់​អំពីការ​ចែក​ចាយ memory ដោយសារ JavaScript objects ហើយ​នឹង​អាតុ DOM ផ្សេង​ទៀត​ដែល​ទាក់ទង​គ្នា។
  • រីឯ JavaScript profiler បង្ហាញ​អំពី​កន្លែងដែល​ប្រើប្រាស់​ពេល​ក្នុង​ការ execution នៅ​ក្នុង​នៅ​ script របស់​លោកអ្នក។

ចំពោះអត្ថបទ​បន្ថែម​អំពី Profile ទាំង​នេះ លោកអ្នក​អាច​ចូល​ទៅ​អាន​នៅ​ទីនេះ

profiles-panel

អំពី​ការ​ត្រួត​ពិនិត្យ Storage

Resources ជា​កន្លែង​មួយ​ដ៏​សំខាន់​ដែល​អនុញ្ញាត​ឲ្យ​លោកអ្នក​ធ្វើ​ការ​ពិនិត្យ​ឡើង​វិញនូវ resource ដែល​មាន load ឡើង​នៅ​ក្នុង webpage។ វា​អាច​ជួយ​លោកអ្នក​ក្នុង​ការពិនិត្យ​ដំណើរ​ការ​ទៅ​មក​រវាង HTML 5 Database, Local Storage, Cookies, AppCache, ជាដើម -ល-។ ដើម្បី​កាន់តែ​ច្បាស់​លើ​ផ្នែក​នេះ លោកអ្នក​អាច​ចូល​ទៅ​អាន ទីនេះ​ បន្ថែម ។

resources-panel

អំពី​ការ Debugging extensions

ប្រសិន​បើ​លោកអ្នក​ចង់​ប្រើប្រាស់ DevTools ក្នុង​ការ debug Chrome extensions លោកអ្នក​អាច​ទស្សនា​វីដេអូ​ខាង​ក្រោម ឬ​ចូល​ទៅ​អាន​អត្ថបទ Debugging បន្ថែម​ក៏​បាន ។

មាន​ប្រភព​ឯកសារ​ជា​ច្រើន ដែល​លោកអ្នក​អាច​ធ្វើ​ការ​សិក្សា​ស្វែងយល់​បន្ថែម​បាន ហើយ​ខា​ង​ក្រោម​នេះ​ជា​ប្រភព​មួយ​ចំនួន៖

លោកអ្នក​ក៏​អាច​ទស្សនា Regular Show នៅ​ក្នុង Youtube The Breakpoint បាន​ផងដែរ ដើម្បី​ទទួល​បាន​គន្លឹះ​បន្ថែម​ ។ មិន​តែ​ប៉ុណ្ណោះ លោកអ្នក​ក៏​អាច​ធ្វើ​ការ​សិក្សា​ស្វែង​យល់​បន្ថែមអំពីTool នេះ​ ជាមួយ​នឹង​ថ្នាក់ Discover DevTools ជាមួយ​នឹងការ​អនុវត្ត​ជាក់ស្ដែង​ នៅ​ឯ Code School ដោយ​ឥត​គិត​ថ្លៃ បាន​ទៀត​ផង ។

តើ​លោកអ្នក​យល់​យ៉ាង​ណា​ដែរ​ចំពោះ Chrome Developer Tools នេះ? សូម​ដាក់​មតិ​យោបល់​ក្នុង​ប្រអប់​ comment ខាង​ក្រោម 🙂

មាន ១មតិ

  1. ល្អពេក!! 😀 តែ​ខ្ញុំ​មាន​តែ​ប្លុក តូច​មួយ!!! 🙂

Leave a Reply