Google Developers Indonesia Blog: 10 Tahun Chrome DevTools

10 Tahun Chrome DevTools

26 September 2018

Pada awalnya, hadir Firebug

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.

Jangan ketinggalan informasi fitur baru dengan postingan What's New kami

Usulkan fitur baru di milis

Laporkan bug di Chromium Bug Tracker

Ikuti kami di Twitter untuk menemukan fitur baru dan alur kerja mini

Ajukan pertanyaan di Stack Overflow untuk mendapatkan bantuan mengenai penggunaan DevTools

Selesaikan masalah dengan keahlian Anda dan berkontribusi untuk DevTools

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

Ditulis oleh tim Chrome DevTools

6 comments :

Reza Hidayat16 February, 2019 12:19
10 Tahun Chrome DevTools

Main sekarang di Poker88, tempat bermain poker online uang asli terbaik di Indonesia. Poker88 menyediakan berbagai macam pilihan game untuk anda. Cukup dengan mendaftar poker 88 asia dan anda akan mendapatkan 1 ID poker88 yang bisa anda gunakan untuk bermain semua game poker 88 online yang ada di situs resmi poker88. Jangan khawatir kehabisan uang! Poker88 menyediakan minimal deposit rendah sebesar Rp25.000 sehingga anda bisa bermain di poker88 tanpa menguras kantong anda. Segera daftarkan diri anda di link alternatif resmi poker88 asia hanya di situs poker88. Siapkan diri anda menjadi jutawan baru di lingkungan poker 88.

Maksimalkan skill bermain poker dewa anda setiap hari dengan cara bermain di situs resmi Dewa Poker. Dewa Poker menyediakan banyak pilihan game poker online maupun Dewa Poker Online yang bisa anda jadikan sebagai tempat melatih skill bermain Dewapoker anda. Anda cukup mendaftar di link alternatif daftar Dewapoker 2019 dan anda akan diberikan 1 ID Dewa Poker Online untuk anda gunakan bermain di semua situs remsi dewa poker. Silahkan bergabung dengan kami di situs poker online terbaik persembahan Dewapoker. Menangkan kesempatan menjadi jutawan dengan mendapatkan progressive jackpot Dewa Poker yang memiliki total hadiah hingga ratusan juta rupiah. Jangan ragu bermain di Dewapoker, karena Dewa Poker Asia merupakan situs poker resmi Indonesia, Dewapoker situs poker online terpercaya
ReplyDelete
Replies
agen poker06 March, 2019 13:40
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.

Situs judi online sudah sangat terkenal di Indonesia, banyak situs judi online yang bermunculan membuat para pejudi bersemangat untuk mencoba mendaftar di situs tersebut. Namun anda juga perlu mewaspadai dan mencari tahu situs judi online yang ingin anda mainkan tersebut. Karena banyak situs judi online yang menipu para membernya, belum lagi tidak semua agen judi online memberikan kenyamanan dan pengalaman bermain jdui yang membuat anda seperti pejudi profesional. Maka dari itu saya merekomendasikan Agen Judi Online Indonesia 2019 Terbaik :

dewa poker
dewapoker
poker 88
poker
capsa
ReplyDelete
Replies
depokcapsa09 March, 2019 10:04
Firebug adalah ekstensi Firefox yang memungkinkan Anda men-debug, mengedit, dan memantau halaman secara real-time.

Jika anda memiliki keahlian dan kemampuan untuk bermain judi namun masih takut untuk mencoba situs judi online karena banyaknya kasus penipuan, kami akan merekomendasikan situs judi online teraman dan terpercaya untuk anda. Saya menjamin agen judi online yang akan saya rekomendasikan aman dan terpercaya, belum lagi dengan adanya bonus saat pertama kali mendaftar dan bonus setiap minggunya yang akan di dapatkan menjadikan anda merasa yakin untuk mendaftarkan diri anda dan memainkannya di Agen Judi Online Terpercaya Indonesia 2019 :

judi online
togel hongkong
togel singapura
judi online
capsa
ReplyDelete
Replies
bonus deposit25 July, 2019 12:53
BONUS MEMBER BARU 200% dan HADIAH JACKPOT CASH 60.000.000 Juta hanya di Bonus Deposit
BONUS DEPOSIT
bonus deposit88
ReplyDelete
Replies
laocdominoqq27 April, 2020 21:55
PaketQQ merupakan situs judi dominoqq online dan bandarq dengan pelayanan 24 jam online non stop dan proses deposit withdraw terpercaya di indonesia.
ReplyDelete
Replies
Judi Togel Wap25 May, 2020 12:26
EVERYTHING HAPPENS IN THIS WORLD IS BECAUSE WE HAVE A SOMETHING BAD THING WE DO IN THIS WORLD OR WE HAVE A BAD KARMA IN THE PAST.
Cara daftar Wap
Result Hongkong Siang
Result Sydney
Result Malaysia Siang
Result Singapore Metro
Result Singapore45
Result Saporo Night
Result Qatar
Result HK

http://45.77.41.36/
Thanks For Read My Some Articel Today :)
ReplyDelete
Replies

Add comment

10 Tahun Chrome DevTools

6 comments :

Labels

Archive