Chrome memasuki usia 10 tahun! Terima kasih telah membuat komunitas pengembangan web begitu terbuka, kolaboratif, dan mendukung. DevTools mendapatkan inspirasi dari project-project lain yang tak terhitung jumlahnya. Berikut adalah sedikit flashback mengenai bagaimana DevTools hadir, dan bagaimana perubahannya selama bertahun-tahun.

Pada awalnya, hadir Firebug


Bayangkan untuk sesaat ketika browser tidak diluncurkan dengan fitur developer. Bagaimana Anda akan men-debug JavaScript? Anda memiliki 3 opsi:
Menambahkan panggilan window.alert() ke seluruh kode Anda.
Memberi komentar bagian kode.
Memandang kode untuk waktu yang lama hingga dewa-dewa JavaScript memberikan Anda sebuah solusi.

Bagaimana dengan masalah layout? Error jaringan? Sekali lagi, yang bisa Anda lakukan hanyalah melakukan eksperimen secara hati-hati dalam kode Anda. Ini adalah realitas pengembangan web hingga tahun 2006. Kemudian fitur kecil bernama Firebug hadir dan mengubah segalanya.


Screenshot panel Net Firebug, diambil dari Saying Goodbye to Firebug (sumber dan lisensi)



Firebug adalah ekstensi Firefox yang memungkinkan Anda men-debug, mengedit, dan memantau halaman secara real-time. Sebagai developer web, dari yang sebelumnya Anda tidak memiliki visibilitas ke halaman web, tiba-tiba Anda langsung bisa memiliki apa yang pada pokoknya adalah fitur inti dari fitur developer modern. Kemampuan untuk memahami dengan tepat mengapa Firefox berperilaku seperti ini menimbulkan banjir kreativitas di web. Tanpa Firebug, era Web 2.0 tidak akan mungkin terjadi.

WebKit Web Inspector

Pada waktu yang hampir bersamaan dengan peluncuran Firebug, beberapa engineer Google mulai mengerjakan project yang pada akhirnya mengarah ke Chrome. Sejak awal, Chrome adalah mashup library kode yang berbeda. Untuk rendering, para engineer Chrome memilih WebKit, yang merupakan project open source yang masih mendukung Safari hingga hari ini. Bonus tambahan menggunakan WebKit adalah bahwa ia hadir dengan fitur siap digunakan yang disebut Web Inspector.

Screenshot Web Inspector, diambil dari Web Inspector Redesign (sumber dan lisensi)

Seperti panel Net Firebug, Web Inspector asli mungkin tampak tidak asing. Banyak dari fungsionalitasnya masih ada sampai hari ini sebagai panel Elements di Chrome DevTools. Web Inspector diluncurkan beberapa hari setelah Firebug, dan Safari adalah browser pertama yang memaketkan fitur-fitur developer langsung ke browser.




Era "Inspect Element"


 Chrome membawa banyak ide inovatif ke ekosistem browser, seperti omnibox yang menggabungkan penelusuran dan kolom URL, dan arsitektur multiproses yang mencegah satu tab menggantung membuat error seluruh browser. Namun inovasi yang paling kami sukai adalah menyediakan fitur developer di setiap build untuk setiap pengguna, yang bisa dijalankan hanya dengan mengklik mouse.

"Inspect Element" pada 2010



Sebelum Chrome, fitur developer adalah pengalaman pilihan. Anda harus menginstal ekstensi, seperti Firebug, atau mengaktifkan beberapa flag, seperti yang masih dipakai di Safari hari ini. Chrome adalah browser pertama yang menjadikan fitur developer dapat diakses dari setiap instance browser. Kami ingin mengklaim bahwa kami memiliki visi besar untuk membuat browser ramah-developer sejak awal, tetapi kenyataannya adalah bahwa Chrome memiliki banyak masalah kompatibilitas di hari-hari awalnya (hal ini masuk akal, karena tidak ada yang mem-build untuk Chrome) dan kami harus menyediakan cara mudah bagi developer web untuk memperbaiki masalah ini. Developer web berkata kepada kami bahwa ini adalah fitur yang bermanfaat, dan kami mempertahankannya.


Era seluler


Dalam beberapa tahun pertama project DevTools, kami pada dasarnya menambahkan babak-babak ke cerita yang dimulai oleh Firebug dan Web Inspector. Pergeseran besar berikutnya dalam pendekatan kami terhadap DevTools terjadi ketika semakin jelas bahwa smartphone hadir di sini untuk tetap tinggal.
Misi pertama kami di dunia baru yang menantang ini adalah memungkinkan developer untuk men-debug perangkat seluler real dari mesin pengembangan mereka, yang kami sebut proses debug dari jauh. DevTools sebenarnya diposisikan dengan baik untuk menangani proses debug dari jauh, akibat lain dari arsitektur multiproses Chrome. Pada awal project DevTools kami menyadari bahwa satu-satunya cara debugger bisa mengakses browser multiproses adalah melalui protokol klien-server, dengan browser menjadi server, dan debugger menjadi klien. Ketika Chrome seluler hadir, protokol ini sudah dimasukkan ke dalamnya, jadi kami hanya perlu membuat DevTools yang berjalan di perangkat pengembangan Anda berkomunikasi dengan Chrome yang berjalan di perangkat seluler melalui protokol ini. Protokol ini masih merupakan kekuatan DevTools sekarang ini, dan sekarang dikenal sebagai Chrome DevTools Protocol.

Proses Debug dari Jauh

Proses debug dari jauh adalah sebuah langkah ke arah yang tepat, dan sampai hari ini masih merupakan fitur utama untuk memastikan bahwa situs Anda berperilaku wajar di perangkat seluler real. Namun, seiring waktu, kami menyadari bahwa proses debug dari jauh menjadi kurang menarik. Ketika Anda berada di fase awal mem-build situs atau fitur, Anda biasanya hanya membutuhkan perkiraan orde pertama pengalaman seluler. Ini mendorong kami untuk membuat serangkaian fitur simulasi seluler, seperti:

  • Dengan tepat mengemulasikan viewport seluler, menyimulasikan masukan berbasis-sentuh dan orientasi perangkat.
  • Membatasi sambungan jaringan untuk menyimulasikan 3G dan CPU untuk menyimulasikan hardware seluler yang kurang kuat.
  • Spoofing browser, geolokasi, data akselerometer dan banyak lagi.

Kami secara kolektif merujuk fitur-fitur ini sebagai Device Mode.






Prototipe awal Device Mode



Device Mode pada 2018


Era kinerja


Saat era seluler terbuka, aplikasi besar seperti Gmail mendorong batas-batas kemampuan web. Bug berskala-Gmail diperlukan untuk fitur berskala-Gmail. Salah satu kontribusi besar pertama kami ke ekosistem fitur adalah menunjukkan perincian secara mendetail tentang semua yang harus dilakukan Chrome untuk menampilkan sebuah halaman.


Panel Timeline asal, seperti yang ditampilkan dalam Do More with Chrome Developer Tools


Panel Performance pada 2018


Fitur-fitur ini merupakan langkah ke arah yang tepat, tetapi untuk menemukan peluang optimalisasi, Anda harus mempelajari detail-detail mendalam tentang bagaimana browser bekerja dan menyaring banyak data. Akhir-akhir ini, kami mem-build berdasarkan fondasi ini untuk menyediakan lebih banyak analisis kinerja terkendali. Lighthouse engine baru menggerakkan panel Audits, dan juga tersedia sebagai modul Node untuk integrasi dengan sistem CI.


Saran kinerja di panel Audits


Era Node.js


Hingga tahun 2014 atau sekitar tahun tersebut, kami memikirkan DevTools sebagai fitur untuk mem-build pengalaman yang menakjubkan di Chrome. Kemunculan Node mendorong kami untuk memikirkan kembali peran kami dalam ekosistem web.
Dalam beberapa tahun pertama keberadaan Node, developer Node berada dalam situasi yang mirip dengan developer web sebelum Firebug, atau developer Gmail sebelum panel Timeline: skala aplikasi Node melampaui skala fitur Node. Mengingat Node berjalan di JavaScript engine Chrome, V8, DevTools adalah kandidat dasar untuk mengisi kekosongan ini. Dukungan untuk proses debug Node dengan DevTools hadir pada tahun 2016 dan menyertakan fitur DevTools yang biasa, seperti breakpoints, code stepping, blackboxing, source maps for transpiled code, dan sebagainya.
Node Connection Manager



Ekosistem protokol DevTools


Nama Chrome DevTools Protocol (CDP) menyarankan API yang hanya bisa digunakan oleh DevTools. Kenyataannya lebih umum dari itu: ini adalah API yang memungkinkan akses terprogram ke Chrome. Selama beberapa tahun terakhir, kami telah melihat beberapa aplikasi dan library pihak ketiga bergabung dengan ekosistem protokol:
  • chrome-remote-interface menyediakan akses JavaScript tingkat rendah ke protokol
  • Puppeteer membawanya ke tingkat abstraksi berikutnya dan mengaktifkan otomatisasi browser headless Chrome dengan JavaScript API modern
  • Lighthouse mengotomatiskan proses pencarian cara untuk meningkatkan kinerja dan kualitas halaman

Kami senang melihat ribuan project bergantung pada package ini untuk mengaktifkan interaksi yang kaya dengan Chrome. Jika Anda berada di bisnis otomatisasi atau fitur, ada baiknya memeriksa protokol ini untuk melihat apakah ia membuka peluang apa pun dalam domain Anda. Misalnya, tim VS Code dan WebStorm menggunakannya untuk mengaktifkan proses debug JavaScript dalam IDE-nya masing-masing.

Apa yang berikutnya?


Misi utama kami adalah mem-build fitur yang bisa membantu Anda menciptakan pengalaman menakjubkan di web. Kami sangat bergantung pada masukan Anda untuk membantu kami menentukan produk atau fitur yang perlu di-build.


Terima kasih telah membuat komunitas yang menyenangkan. Kami menantikan kebersamaan 10 tahun selanjutnya untuk mem-build web bersama Anda.

Ditulis oleh tim Chrome DevTools