Ngobrolin DevTools
Ringkasan Episode
Bantu KoreksiChrome DevTools dibahas sebagai salah satu alasan sesungguhnya orang bertahan pada sebuah browser — bukan mesin renderingnya, melainkan seberapa nyaman alat bantunya dipakai sehari-hari. Ceritanya dimulai dari Firebug, extension Firefox yang dulu jadi hal pertama yang dipasang orang setiap habis memasang ulang Windows, dan yang membuat menyunting CSS langsung di halaman jadi mungkin. DevTools yang kita pakai sekarang justru terinspirasi darinya; sebagian orang Firebug kemudian direkrut Google untuk membangun Chrome DevTools, dan sisanya membangun DevTools bawaan Firefox. Obrolan ini juga menyinggung keanehan yang jarang disadari: JavaScript tidak punya situs dokumentasi resminya sendiri. Alasannya karena ia implementasi dari spesifikasi ECMAScript dan tiap browser menafsirkannya masing-masing — sampai akhirnya MDN, yang dibuat Mozilla, justru diterima semua orang sebagai rujukan bersama. Sisanya tur fitur yang sering luput. Alat bantu visual untuk grid dan flexbox menampilkan garis panduannya langsung di halaman. Ada tangkapan layar seluruh halaman dari atas sampai bawah tanpa extension apa pun, bahkan per elemen lewat klik kanan. Ada pemblokiran request jaringan tertentu, berguna saat ingin memeriksa situs klien tanpa gangguan skrip iklan. Ada palet perintah lewat Command+Shift+P yang mempercepat semuanya. Disebut pula fitur 3D view Firefox yang dulu ada lalu dihapus karena berat, sementara Chrome punya panel Layers yang mirip meski kurang fancy, serta YSlow dari era Yahoo sebagai leluhur Lighthouse.
Poin-poin Utama
- •Kenyamanan DevTools sering jadi alasan sesungguhnya orang bertahan pada satu browser, bukan mesin renderingnya
- •Chrome DevTools terinspirasi dari Firebug, dan sebagian orang Firebug kemudian direkrut Google untuk membangunnya sementara sisanya membangun DevTools bawaan Firefox
- •JavaScript tidak punya situs dokumentasi resmi karena ia implementasi spesifikasi ECMAScript — yang jadi rujukan bersama justru MDN buatan Mozilla
- •Alat bantu visual untuk grid dan flexbox menampilkan garis panduannya langsung di halaman, sangat menolong saat hasilnya tidak sesuai bayangan
- •Tangkapan layar seluruh halaman bisa dilakukan tanpa extension apa pun, bahkan per elemen lewat klik kanan
- •Request jaringan tertentu bisa diblokir, berguna saat memeriksa situs tanpa gangguan skrip iklan yang bukan urusan kita
- •Palet perintah lewat Command+Shift+P mempercepat semuanya, dan Firefox pernah punya 3D view untuk melihat lapisan halaman sebelum dihapus karena berat
(musik)
Hai hai hai selamat malam semuanya
kok cuma berdua?
kok cuma berdua? mana satu lagi?
kita juga gak tau nih mana satu lagi
Eka nanti menyusul ya
jadi kita buka dulu aja
selamat malam semuanya
seperti biasa hari selasa ketemu lagi
sama kita ber...
dua sum akan bertiga
mudah-mudahan sebentar lagi akan bertiga
seperti biasa di acaranya
ngobrolin web di selasa malam
karena selasa malam waktunya
ngobrolin web
iya
kita udah
wah udah
malam ini episode ke 38
ke 39 episode ya
udah lebih
udah lebih setengah tahun ya
setengah tahun ya? kita mulai kapan?
pokoknya setelah dari
Gigi Summit
dari Bali
iya iya iya
berarti bentar lagi setahun ya
batis sebentar lagi kita harus
Lihat transkrip lengkap (2416 segmen lagi)
lagi mas Danang kita kapan ke Bali lagi
hahaha
hahaha
setahun berapa episode berarti?
seminggu 4, 50 sekian
54 pastinya
54, oh iya
1 tahun 54 minggu
oke, oh berarti bentar lagi ya
iya, jadi ada acara
ada usul gak temen-temen semua
kalau 54 itu kita
topik apa, acara apa, potong kue
atau gimana gitu
mungkin kita ketemuan bertiga
potong kue, maybe
ide bagus tuh buat ketemu
offline gitu ya, atau
misalnya undang temen-temen buat ngobrol bareng
jadi semuanya diundang ke StreamYard
kesini, kuat gak ya?
atau ke Discord kali ya?
mana aja deh, bisa gak dari
dari StreamYard
atau Discord kita broadcast gitu
bisa gak ya, oh bisa bisa bisa
bisa ya, bisa
kalau StreamYard saya gak tau maksimumnya
berapa peserta, berapa
narasumber gitu ya, berapa orang
mungkin 8 maksimum, tapi kalau
di Discord kan bisa banyak ya
jadi mungkin di Discord, di broadcast ke itu
nantilah kita ngobrolin sama
temen-temen
GDG dan GDE yang
di Discord kali ya, buat
make sure, bisa apa enggak
oke, sambil menunggu
bintang tamu satu lagi
yang paling cantik, diantara kita bertiga
kita malam ini
akan ngobrolin tentang DevTools
kalau temen-temen
web developer pasti
sehari-hari berkutat dengan ya pasti
kode editor sama
biasanya Chrome DevTools
kalau saya sama satu lagi
itu nya
kitab sucinya MDN
MDN
kitab sucinya
dokumentasi ya
iya
kitab suci
warga web dev
iya, itu salah satu
apa ya, salah satu yang unik juga
kenapa JavaScript tidak ada
dokumentasi resmi
dari JavaScript nya
oh iya, karena
iya kan, maksudnya MDN kan punya
Mozilla kan, gitu kan
punya salah satu browser kan, bukan resmi
javascript.com misalkan, atau
golang.com atau
apa gitu kan, itu alasannya
beda loh
antara JavaScript API
dengan web API beda loh
oh iya, beda, beda, tapi kan
di MDN juga ada JavaScript
API kan
iya, ada
JavaScript documentation untuk penggunaannya
ada, betul
ada web API nya juga kan
jadi, udah gabung semua disitu kan
yang mungkin
awal-awal
terutama saya bingung itu, waktu
belajar JavaScript pertama kali
ya dokumentasi resminya kok di MDN ya
atau belajarnya di
waitresschool ya, gak ada
iya, kalau misalkan PSP kan ada
PSP.net, gitu kan
dokumentasinya ada disana, gitu kan
Laravel, Laravel.com
iya, itu kan framework ya
framework, React dan lain-lainnya pasti ada
tapi JavaScript ini gak ada, karena
ya itu tadi, JavaScript itu
adalah implementasi dari
spesifikasi yang namanya
ECMAScript, ECMAScript ada
dokumentasinya, kemudian masing-masing
browser, implementasi
si
spesifikasi itu dengan
interpretasinya sendiri kan, awalnya
ada yang pakai engine ini
ada yang pakai engine itu
dan ternyata sih
Mozilla
cukup berhasil membangun
dokumentasi, akhirnya yang lain pada ngikut
ya adalah di MDN aja lah, udah terkenal ini, gitu kan
akhirnya jadilah
kitab suci resmi dalam tanda
kutip untuk JavaScript
C++ juga gak ada ya
bener juga ya
ada kali
tapi kita gak tahu
karena C++ sama
engine itu berbeda, kompilennya
beda, ada Borland, C++
ada Delphi
karena
ya kan, ada yang punya si
Microsoft
C#
bukan, C++
kompilennya kan beda, saya gak tahu
jadi, karena saya
udah lama banget belajar C++
jadi set tau dulu ada
Borland C, Delphi
ada Turbo C
ada yang open source juga
GCC kan open source
GCC juga beda
mungkin sama kali ya
jadi kayak punya
apanya istilahnya, kayak
algoritma nya begini loh
distro
distro linux ya
apanya
implementasinya bagaimana
kompilennya itu
tergantung dari asistektur
bla bla bla nya
ini visual C++ bener gak?
visual C++ itu punya
Microsoft, betul sekali
terima kasih Mas Muhammad
Farid, what's the
dan
ya itu, kita jadi
ngelantor sedikit ya, kita malem ini ngomongin
DevTools, DevTools itu biasanya
masih pengaruh juga
karena ada baseball seosan-seosan masing-masing
implementasi
jadi masing-masing broser
punya DevTools sendiri, dan
ada juga DevTools ya, DevTools ini kan
kayak alat bantu buat kita kan
selain code editor, nanti mungkin kita akan bahas
di episode sendiri, ada extension masing-masing
di broser
juga ada extension nya, ada
DevTools bawaannya, ada tools
diluar itu juga, ada
mungkin temen-temen yang nonton bisa share
biasanya, kalau kerja, bikin
aplikasi web, itu sukanya pakai apa
favorite nya gitu, tools favorite nya apa
kalau
kita pasti yang paling
sering dibuka adalah, dan salah satu ya
ini salah satu faktor penentu
kenapa kita memilih
browser adalah
DevTools nya nyaman
dipakai, kenapa
Chrome banyak
yang pakai, salah satu alasannya
adalah karena DevTools nya
bagus
Nah ini dia, bintang tamu kita
sudah datang
Halo, maaf Lat, habis
ada emergency
emergency meeting
Oke, tapi mungkin sebelum
ngomongin DevTools yang sekarang
kita bahas sejarah dulu
seperti biasa ya, bahas sejarah, keman dulu
ada gak sih DevTools, kayaknya dulu
ada, tapi
kalau browser-browser dulu mungkin kayak
apa, netscape navigator kayaknya
gak ada deh
jaman dulu tuh kan, oke
kita harus finish kan jaman dulu
jaman saya pertama kali
jaman Ivan Muda
ada gak
nge-dink web, ya nge-dink web
itu menggunakan
browser aja lah, itu
relatif
di Indonesia
jaman internet explorer
kalau di Indonesia
jaman waktu saya
pernah muda
di Indonesia itu
di Indonesia
browser yang top 2
browser yang top ya
yang menguasai pasar itu adalah EA dan
Firefox
itu di tahun 90
tahun 2000an
2000an
Mozilla, jaman dulu Mozilla
terkenal nya ya
Mozilla
intinya Mozilla
karena kalau di kampus
atau di komputer
biasa
maksudnya di komputer waktu SMA
gitu
gurunya ngajar pakai EA
sedangkan di
war.net pada
pakai Firefox
Opera juga
karena yang pertama ada extension
ada plug-in, ada beaming ya
dulu kan ya kalau yang
orang melek teknologi lah
yang techie itu pakainya
apa itu Mozilla berarti?
Plus flash itu lebih gampang
di installnya di Mozilla, somehow
saya gak tau kenapa lebih
mudah pakai
flash-flash blablabla
untuk extension
flashnya itu lebih gampang di
Mozilla
Kalau Opera berangkatnya dari mobile kan
terkenal nya, gak?
gak juga dari desktop
ya brosernya ada
tapi yang paling terkenal kan
Opera Mini kan
itu setelah
Symbian
sebelum jaman
Symbian deh, sebelum
Blackberry
Safari di Indonesia kurang
terkenal karena
memakai Macbook, Macbook nya mahal
jarang, tidak seperti
sekarang, tidak seperti
beberapa tahun yang lalu
terus karena saya
untuk moding itu
antara EA dan
Mozilla
akhirnya saya pakai 1 extension
lebih mudah akhirnya pakai
Firefox karena ada
extension apa?
Firebug
ini happening banget nih
firebug itu keren banget jaman itu
saya bisa inspect
terus kalau mau geser-geser
css-nya, geser-geser
pakenya firebug
firebug itu
kenapa aku gak ngejamani firebug
ngerasa
pernah liat, mau saya baca sekilas
cuma gak ada ingetan pernah
pakai firebug sih
firebug itu salah satu extension yang
kalau misalkan kita baru install
ulang nih, kan kalau jaman dulu kan
Windows itu sering di install ulang ya
kalau udah berat nih install ulang
pertama kali
extension yang pertama kali di install adalah
firebug dulu
karena kita pengen
belajar
segin seringnya install ulang Windows
license key nya sampai hapal
kan biasanya itu
udah sistem dipisah
di drive sendiri kan
FCKGW
Eka mah gak ngalamin
Eka
kita mah Windows bajakan
keren sih gak ngalamin
itu jaman dulu ya
jaman ke-8
tapi
mau gimana pun
gak aksesibel
meskipun mau beli pun gak aksesibel
gak bisa, gak bisa beli
belinya dimana
iya, kalau sekarang kan ada Windows Store
ada berbagai store yang gampang
kan tinggal klik, bayar, pakai kartu kredit
atau apa-apa, kalau dulu kan gak ada
jadi kita gak bisa juga
oke, tapi
ini ya, kita cari
permintaannya Eka ya, disini ada gak ya?
nih tampilan pertamanya, tapi saya ngalamin yang ini
saya itu bagian yang
nah ini
udah, udah
udah minum banget sama
DevTools, ya essentially
maksudnya di luar fitur-fitur tambahan
yang sekarang ada
basicnya berarti udah
mirip sama DevTools yang sekarang ya
Justru DevTools yang sekarang itu
terinspirasi dari SpireBug
iya, mereka mencontek
bener-bener mencontek
jadi mulai awal itu 2006
pertama kali hanya ada
tab console
yang pertama console ya?
iya, baru ada dibaging
baru, abis itu di open source
kemudian
ini masuk web 2.0 katanya ya
di 2007
terus, apa lagi nih
2010
ada namanya FireBug Lite
iya, untuk bisa
saya sempet ngalamin tuh
pas install Google Chrome
ah cari ah FireBug
di Google Chrome, oh belum ada, adanya FireBug Lite
terus abis itu
baru mereka akhirnya
masih ada loh
sekarang FireBug, kalau misalnya kita pake
boka ke
Firefox extension
masih ada FireBug
cuma sebagian besar, fiturnya
dan timnya itu udah menyebar
masuk ke
bikin
Firefox DevTools
dan beberapa di hire sama
Google untuk bagusin
Chrome DevTools nya mereka
iya, jadi
banyak dibajak tuh, orang-orang
FireBug sama Firefox
Mozilla itu masuk ke
Google Chrome
jadi dulu ini ga ada
dan kita harus install
dulu, abis itu baru bisa
kita nikmatin yang seperti sekarang
kalau ngeliat fitur-fiturnya itu
mirip sekali, karena
Toh juga ini open source kan
FireBug ini open source kan, jadi
di contoh, atau di ambil kodenya
pun ga masalah
ini timeline
ini console
ini yang di kanan itu ya buat
layout ya, margin border
dan lain-lain ya, border box
eh, oh, box model
sorry, box model
box model, ini
yslow, yslow itu
yang yahoo punya ya bukan?
yes, yes, yes, performance monitor
sampai sekarang masih ada
kalau si yslow nya sendiri
masih, masih
dan
nah, saya mau nunjukin
satu fitur yang menurut saya
menarik yang kayaknya
di Chrome tidak di
implementasi, tapi di
Firefox sekarang ada, ya maksudnya
tetap dipertahankan gitu
saya ganti dulu ya ke
Mozilla ya, saya Mozilla
ganti screen dulu
mau nunjukin dulu nih
demo, demo
jadi dia ada multiline
mode, kalau misalkan
di Chrome DevTools kan
misalkan kita console gitu kan
solok, abc
gitu kan, udah, kita mau ke
baris berikutnya kan harus tekan
control enter atau shift enter kan
kalau kita enter kan dia
eksekusi kan
kalau Firefox DevTools
ini ada switch to
multiline editor mode
atau pencet control B atau
command B, dia akan jadi
function
enak ya, kayak IDE
kalau saya kayak coding IDE
jadi nggak perlu shift, nggak perlu control
betul
kita bisa langsung tulis disini
seperti layaknya kode editor
gitu
kalau panjang ini kan kode-ketik
di facecode, biar enak ketiknya
habis itu copy paste
ini bisa langsung
ini salah satu fitur yang
tertahankan oleh Firefox
dari Firefox
kalau di Chrome kayaknya nggak ada ya
atau ada ya, saya nggak tahu
atau ada tapi kita nggak tahu
atau ada extensionnya, siapa tahu
karena kan si Chrome DevTools ini ada extensionnya
kan, bisa diganti timnya
gitu, karena ini adalah
aplikasi sendiri nih
ini aplikasi web sendiri, saking
besarnya gitu ya
oke, kita balik lagi
ke layar
pertama, oke
lanjut, Chrome DevTools
kalau kalian biasanya
Chrome DevTools yang paling
favorit dipakai apa aja
ininya, fiturnya
yang paling sering
kalau aku standar ya
yang pasti inspect element
itu udah pasti
disable javascript
disable javascript
disable cache
throttling
throttling pakai
yang ada disini ya, kita tunjukin aja kali ya
iya, kita tunjukin satu-satu
lighthouse
kita pakai console nih
misalnya, inspect element
inspect element
misalkan, kita mau liat
judulnya
cari yang ada gridnya dong, biar bisa
nanti, biar bisa muntuh itunya
oke, disini ya, ada grid kan
gak tau
ya coba aja, kali ada
ini grid
itu grid area tuh
bisa diklik gridnya
ini
iya, betul
itu bisa, jadi kalau kita kan suka lupa nih
apa, online items aja
wah, ini sering ketukar
sering banget ketukar ini
ini ada
helpful visually lah, secara visual
kita bisa nge click satu-satu tuh
iya
oke
wah, berantakan
wah, ancur, balikin lagi
oke
terus, kalau pengen liat itunya
maksudnya, kalau ini kan gridnya mungkin
simple ya, tapi kadang kalau gridnya rumit
kita bisa nge click itunya
tulisan gridnya tuh
yang tulisannya grid di atas
ini, oh ini
oh, wow
kelihatan
breakpointnya, jadi misalnya
kita punya grid yang agak
kompleks, grid line-nya banyak
terus misalnya pakai min max atau apa
kita bingung nih, kenapa hasilnya gak sesuai
bayangan kita, nah itu bisa
itu helpful
apa, kita nge click itu, jadi bisa
check grid line-nya yang mana
oke
kalau di mobile sih, gak terlalu kelihatan ya
tapi kalau tampilan desktop
yang apa, yang lebar
itunya banyak, itu helpful banget sih
flex juga ada
jadi semua lay out
sama ya, flex juga
oh iya, ada yang ketinggalan dari salah satu
fitur, tadi kan kita ngomongin
Mozilla ya, dari firebox kan
akhirnya pindah ke firefox
devtools, salah satu fitur yang
sempet ada, fitur unik yang sempet ada
terus sekarang udah ilang, adalah 3D view
ada yang ngalamin gak?
jadi kita bisa liat layer
bisa liat layer-nya, betul
ini dia, bisa dibalik-balik 3D
bener-bener 3D
tapi berat, akhirnya di hilangin
ini keren banget
jaman dulu, kalau kita main-main lay out kan
bisa tau yang mana lay out yang
yang menipas siapa, yang paling atas
z-index terutama disini bisa
yes, ini
tapi sudah tidak ada
cuma ini fancy banget ya, sebenernya kalau buat
crystallized layer kan sebenernya bisa pakai
kalau yang sekarang kan pakai itu kan
overlay background
yang ada opacity-nya gitu kan
gue juga bisa liat
pakai apa
itu opacity background, cuma ini ada
lucu banget sih itu ada
ini dulu
waktu ada fitur ini
kita pakai bukan buat kerja
tapi buat main-main lucu-lucuan
gak terlalu bermanfaat buat kerja
kayak dulu di chrome pernah ada deh ini
gue kok lupa ya, ada loh di chrome
pernah gak sih? ingat gak sih?
enggak, enggak
gak sempat ingat tadi ya, gue coba
bongkar-bongkar lagi ya
oke, anyway
kita balik lagi ke sini ya
yang biasa kan, inspect
elemen, kalau diklik kita mau kemana gitu kan
kita mau cari tau ini apa
kita bisa ganti-ganti juga
bisa dihapus, bebas ya
walaupun kalau direfresh
hilang kembali lagi kan
terus konsol, yang kayak tadi kan
ini konsol, mungkin jangan-jangan ada disini
ya itu lah
kalau disini kan
kita function gitu kan
function apa tadi, function
open
kalau di enter dia akan
ke baris berikutnya
enggak, ini enter dia udah langsung
ini otomatis, berarti udah multi-line
otomatis ya
aneh, kok aneh
kok
demonya gagal
kalau konsolok, kalau satu ini ya
tuh kan, error kan
oh kalau
kalau ada buka
kurungnya
coba jangan langsung tutup
konsoloknya jangan langsung tutup
jadi multi-line, oh ini berarti lebih smart
tuh, baru tau kan
sama, kita juga baru tau
jadi gak usah pake Firefox, udah langsung disini aja
ya maksudnya pake
untuk
untuk yang tadi
3D-3D ada nih
ada? ada
di mana?
itu yang titik 3
titik 3 di atas itu
more tools
layers
nah
tuh bisa kelihat
di kanan ini bisa di zoom
sebentar, ini
full screen aja kali ya?
bukan
ini bisa di scroll
nah di zoom
tapi gak 3D ya? oh bisa di putar ya
bisa, bisa di putar
tuh
kita biar gak terlihat 3D-nya gak se
ekstrim yang tadi ya
iya, tidak se fancy yang tadi
mainan kan
mainan, tuh kelihatan kan
kelihatan z-index, nah itu
di kiri kan ada tree-nya tuh
yang crash 2, nah itu bisa liat tuh
itu layer-nya semua tuh
oh, oke
makanya gue inget ada gitu
ada kok, itu tidak se fancy
si Firefox punya ya, jarang
jarang pake
iya
nah pertanyaannya sebenarnya
ya itu tadi ya, jadi kalo temen-temen
penasaran mau
tau ada fitur apa aja, liat
disini banyak sekali, kalo misalkan disini
ada tab gitu kan
klik, ada apa aja, terus
kemudian kalo kurang, ada more tools, disini ada
banyak juga tambahannya
yang kita sendiri belum banyak
main-main kesini, itu ada web
outan segala disini
dan mungkin tiap minggu atau tiap bulan ada
bertambah gitu, tambah satu, tambah satu
gitu kan, ada update
yang biasanya nge-update beginian tuh
bahasa selin, yang
bintang tamu lalu
iya, episode lalu
oh, terus kalo misalnya kita
udah tau feature yang mau kita cari
tinggal ada shortcut-nya kan
command + shift + p
iya, ini juga salah satu
command + shift + p, nanti muncul
palette-nya, jadi
kalo misalnya kita mau buka apalah
lighthouse atau
enable/disable javascript, kan
lebih cepet ya daripada nyarinya
saya tadi udah liat notenya mas Riza
tau gak kalo kalian itu bisa
nge-screenshot tanpa perlu extension
nah, ini salah satu
fitur menarik juga nih, yang sering
sekali saya pakai, jadi kalo misalkan kita mau
screenshot ini, ini kan halaman-nya
panjang sekali kan, gitu kan
kalo kita screenshot satu-satu kan capek ya
kalo dulu kita harus pake
aplikasi tuh, namanya apa
kalo di windows itu ada, otomatis dia
pake scroll sendiri gitu kan
kalo di devtools itu
ada fiturnya, jadi kalo misalkan
temen-temen mau print, ctrl + shift + p
terus screenshot
yang full
full size
jadi dia akan
sampe ke
bawah-bawahnya
udah selesai dia
oh biasanya, kalo
gue sering pake itu, kalo udah lagi
responsif mobile mode sih
kalo itu kan muncul
icon-nya juga buat screenshot
cuma mungkin, enaknya ini
bisa semua
nih hasilnya, panjang begini
kalo di zoom
oh sama, responsif mode juga
bisa
bisa per node juga ya
jadi klik inspect element, node
yang bagian mana, terus bisa
di screenshot per node
klik kanan bisa screenshot juga
itu tools yang
paling sering, yang paling sering saya
pake kalo di, kalo butuhkan
kadang-kadang buat demo, nunjukin gitu kan
nah, pakenya itu
terus, ada saya mau share juga
untuk
yang
saya pake
untuk nge-develop untuk
client, namun karena
males kayak ya elah
ini ads-nya muncul mulu
atau ada
script yang saya gak pengen
gue mau liat, gak mau pengen ngejalanin
elu gitu, gue pengen liat yang gue punya
aja gitu, itu bisa network
request blocking
jadi, go to network, refresh
dulu
refresh
itu kan ada tuh CSS atau
JS ya, JS, JS ya
paling sering kan di-blockan JS, ah gak pengen
ngejalanin si GA, ngapain si GA
ngejalanin gitu, klik kanan
klik kanan, oh
gak keliatan ya, oh yaudah
bentar-bentar, di, harus desktop ya
harus desktop
ya, screen, desktop
entire screen, kalo entire screen nanti
muka kita keliatan
nah, dah
klik kanan
klik kanan tuh ada network request
block, request URL
ini ya, ya
nah, kan jadi enable network
request blocking, kalo ini di-refresh
di-refresh
udah gak ada lagi
balik ke tab tadi, keliatan tuh
GA itu block by
block by script, oh
statusnya nge-block
jadi di-load ya
ini juga bisa jadi
salah satu pertama
kalo saya gak suka ngejalanin
analytic, karena gak penting kalo lagi
nge-develop misalnya, gak penting
nge-jalanin tech manager
atau gak penting melihat ads
tertentu, karena pengennya cepat, karena
requestnya banyak banget kan, eh refreshnya
nge-loadnya banyak, ngapain sih di ads gitu
kalo lagi gak fokus di ads
atau
misalnya ngetest script kita
jangan sampe script kita itu harus ada
fallback ya
script kita itu harus bisa kalo, kan gak bisa
ngeharapin si user itu
bisa kita harapin
semua javascript bisa didownload dengan
sempurna
what happen kalo misalnya highlight common pack
jsnya itu gak jalan
apakah web kita
fatal error dan gak
kalo newsletter.js
yang gak jalan, apakah
terjadi fatal error di javascript
semua
eksekusi javascript rusak
kita harus bisa ngetest
pake ini, jadi block satu-satu
script kita
sebagus
kalo yang
apa namanya
idealnya
adalah salah satu
script atau salah dua script yang gak keload
webnya kita
masih bisa ngerender dengan benar
meskipun fitur itu tidak jalan
tetapi
modular ya
catchnya
rapih
kontennya tetap bagus
progressive
enhancement
itu di network, ada lagi yang biasa
sering juga dipakai adalah
device
untuk liat
kira-kira web site kita
atau aplikasi web kita
tampilan di layar yang kecil
misalkan di iphone
itu seperti apa
kita bisa, udah ada presetnya juga ya
bisa di edit juga, kalo mau
nambahin misalkan blackberry
atau fold, ada gak fold?
ada, harusnya ada fold
itu galaxy fold, udah ada
ditambahkan galaxy fold itu di atas
berarti kalo kita disini
galaxy
mana?
nah, terus?
gedein
itu kan ada di atas kanan
di atas kanan
kanan atas
icon kanan atas
di bawah rotation
nah, kalo dibuka
jadinya begini
jadi ada rotate
itu rotate
rotate device biasa
seperti hp biasa
ada rotate, ada fold
liat viewportnya jadi aneh kan
280 itu biasa
tapi 7177 itu
belum pernah liat saya 7177
cantiknya, nambah lagi
kan biasanya 720
720
768 ipad itu standard
sekarang ada 7177
inget ya
nambah lagi kejar
gak usah di target angka execnya
pake range, makanya media query
nah, dari sini juga bisa screenshot tuh
di 3 dots yang kanan atas
kanan atas
dari dotsnya panel utama
capture screenshot ya, bisa juga full
sama kayak tadi ya modelnya ya
jadi kita bisa bikin mockup buat
macam-macam ukuran device
di network juga biasanya saya
enable disable cage disini
buat ngecek, misalkan kita
butuh offline mode, ya berarti
kita enable cage nya
trottling nih
juga cukup sering
performance, terutama semacam
S atau S jenisnya ya
kalau speed normal kan apalagi di lokal
kita gak bakal bisa liat tuh
kayak overhaul yang
font loading tuh shiftingnya kayak gimana
nah kalau misalnya di throttle ya minimal
kita ada gambaran visual lah
ini buat apa ya network ya
saya suka kan kalau defaultnya
cuma ada slow 3G, fast 3G
apa lagi itu
saya lupa
saya suka pake
regular 4G
saya tambahin sendiri
saya suka pake wi-fi
saya suka pake
tanpa batas
unlimited
gak sih, ada yang kayak broadband
broadband kan bisa
ini adalah koneksi kita sendiri
tapi perlu diingat juga fast 3G
disini adalah versi luar ya
beda kecepatannya sama fast 3G
disini
mungkin ini 2.5G kalau disini ya
kalau 4G
berarti 3G lah disini
jadi ya kurang lebih gitu
terus ada apa lagi
apa lagi nih di network
ada lagi gak di network
ya itu sih offline itu
bergunanya kalau yang
pengalaman pribadi sih
misalnya kita pakai service worker nih
yang
kegunaannya misalnya
kalau misalnya koneksi tiba-tiba mati
user udah nge-click post
tapi
post misalnya posting
sosmed atau email atau apapun
ngirim suatu data tapi lagi offline
nah kalau misalnya kita pakai service worker
kan bisa
apalah begitu online langsung
ngirim lagi atau mungkin yang lebih
sering itu munculin tampilan
apa sih kayak bener
kalau offline muncul bener
wah maaf ada sejang offline
begitu online lagi
muncul apa icon
now back online
ini offline apa berguna banget
dulu pas belum tau
beneran pernah ini pas belum tau trot link itu
bisa simulate offline
matiin wifi dong
ya bisa tapi repot
lalu
kalau di network
ada juga tambahan ini
coba masuk ke filternya all
filternya all dulu
terus kemudian refresh
reload reload
nah di bagian
yang namanya itu bisa
pencet shift
contohnya shift
ya di shift tapi di hover
gak usah di pencet
lihat kalau misalnya
di shift ke
contohnya gini
kalau di hovernya ke mana
coba tadi
ke phone awesome
kok jadi begitu
kalau di klik
ok shift dulu
itu yang hijau berarti dia yang manggil
jadi si phone awesome
kalau di hovernya
ke saying goodbye
to firebug
coba kayak yang lain dulu
jquery
ada yang merah tadi kan
nah yang merah
berarti dia memanggil apa
phone awesome memanggil ini semua bawahnya ya
dokumen html
yang paling teri paling tinggi dia memanggil semuanya
kalau misalnya mas Riza
ke jquery min deh
hovernya ke jquery min
coba scroll ke bawah
ya kalau
ini tadi hijau
yang hijau berarti
dia dipanggil oleh si
dokumen tadi
dan kalau dia ke bawah dia akan
manggil yang merah
jadi kalau misalnya tadi jquery min
memanggil sesuatu yang lain
berarti dia
ada dependensinya ya
jadi siapa yang manggil dan siapa yang
dipanggil itu bisa
di shift hover
jadi bisa tau
itu tahunya dari mana
fitur kayak gini tuh
saya
nggak sengaja aja nemu
karena gini
kan bisa kelihatan itu initiatornya
siapa kalau misalnya kita ke
jangan yang ini deh ini terlalu simple
coba ke chrome dev tool
sorry ke web
web.dev
atau yang lebih
coba ke network mungkin yang lebih banyak
pakai
ke all
coba di
ya coba aja di kanan
ya di kanan
klik
oke
turun turun satu turun lagi
main.js nah main.js manggil
manggil bawahnya kan dipanggil oleh dev tool
dan
memanggil enhance select
kalau ini
berarti dia ke main
jadi bisa juga dilihat dari
dari initiator itu
main.js dipanggil index
enhance select dipanggil oleh main.js
main.js
jadi bisa kelihat waterfall
jadi pengen tahu
ini script dari mana sih datangnya
kita kan
kadang bingung ya kalau sudah terlalu
dalam ya
terutama ads
ini siapa sih yang manggil ini
script yang aneh ini
kita bisa trace
nge trace nya dari pada pakai initiator
susah amat
di save hover bisa liat langsung
kemana pergi nya
oke
keren ya
terus bisa baca itu di bagian bawah
paling bawah jadi halaman
ini karena performance ya
15 request
ada untuk
load halaman ini kita
transport
melakukan 15 request
ada 102 kilobyte
yang di transfer
tetapi itu di gezip
ya jadi network
transport ya artinya dan
status 2 kilobyte itu
uncompressed
jadi 255 kilobyte
finish nya
2 detik
don't content loaded nya tidak kelihatan ya
mungkin harus di geser
nah itu kelihatan
itu dia
untuk network
nah biasanya teman-teman kan
suka gak suka ini apa sih
itu yang ada timeline itu
yang di tengah-tengah itu kan biasanya
yang di tengah-tengah ini
bisa di hilangin dengan
cara
pen chat itu
ya itu
show overview ilangin
nah
iya tuh gak suka tapi bingung
ilangin
oke banyak sekali ya
fiturnya ya
luar biasa
oke next apa lagi
saya suka
pakai filter juga
filter itu
kalau pengennya cuman ini
liat jquerynya
ada gak sih jquery contohnya
analytics aja
gpm
dia bisa pakai filter
jadi ini kan
iya ini
iya ini
bisa langsung ya
bisa langsung ya
punya target namanya kan
kita mau ngecek script tertentu
yang kita tau namanya
usually kalau saya pakai filter
itu ini ada gak sih dia pakai
kembali lagi ke ads ya
dia pakai
itu kan jpt bukan
jpt ya google producer tag
ini jpt nya siapa
punya sih gitu nanti bisa decodenya
itu biasanya filter
aja lah daripada cari satu-satu
scroll-scroll kayak susah amat gitu
pakai lah filter
kalau aku biasanya pakai filter
buat ngecek ya
operasi-operasi client side sih
misalnya punya analytics
in house ya yang bukan
ga atau apalah
fetching data pengen mastiin
apa sih datanya
request nya payload nya gimana
terus apa return
datanya gimana itu
enak banget sih daripada
console lock atau apa ya gak perlu kan
kita langsung ngecek aja request nya
sama tadi
Mas Riza ada sempat
sekilas itu yang
network api diklik misalnya
di name dev tool nya
salah di waterfall nya
di waterfall nya
di hover aja
server timing api
sorry
bisa keliatan itu
pernah
pernah bahas ini web performance api
dan kita
saya ngasih tahu
kita bisa nge-ngirim
lewat header
pakai server timing api
itu
kalau misalnya di header itu pakai server timing api
kita bisa kirim misalnya
untuk eksekusi database tertentu
kalian bisa kirimkan
itu db duration nya berapa kali
berapa millisecond
total nya itu bisa
dikirimkan
jadi
saat di hover itu bisa kelihatan
nanti db request berapa lama
itu bisa dijual disini
jadi bisa tahu dari sisi server
berapa lama kirimnya
ini sebenarnya bottleneck nya ada dimana
apakah di client atau di server gitu ya
salah satu fungsinya
ini damar
nge-share nih dia paling
sering pakai application storage sama live host
application storage
biasanya kepakai untuk
pwa ya
ya semua sih
service worker
service worker
saya kalau di storage sukanya untuk
ngapus doang masuk ke storage
clear case
clear case clear itu
lokal storage nya di clear ya
bukan langsung di storage lewat storage
itu yang di storage
application storage clear
clear all
ini ya
bahasa kerennya
di nuke
di nuke
semua
ya kalau ini kan
ya
jadi
sebetulnya dicek dari konsol atau
di lock di server atau dimana
lokal server bisa
cuman kan tampilannya gak enak
kalau misalnya lewat tools ini
lebih enak misalnya
objek ya tampilannya jadi
kayak objek lah kalau array atau
apapun tapi jangan lupa nih
bahwa sebenarnya gimana pun
itu isi data nya tetap string
jadi kalau misalnya kita mau manipulasi
atau nampilin di front end
atau semacamnya tetep jangan lupa
diparse dulu
diparse buat pake data
stringify buat
nestore jadi yang di dev tools itu
walaupun tampilan
array atau objek itu sebenarnya cuman visual
aja biar kita
gampang liatnya
jadi ibaratnya gini lah kalau
temen-temen ngoding di back end kan butuh
tuh mysql apa php
mysql gitu kan
buat ngeliat daripada harus
dia harus apa di console
harus di select bintang blablabla
kan ada alat bantu seperti ini kan
lebih membantu ya daripada
kita harus ke console terus
local storage something something
gitu kan dot get gitu kan
lama sekali gitu
jadi ini sangat memudahkan
iya
iya
selanjutnya apa lagi
kalau tampil application banyak
light house
ya kalau light house ini
tadinya
saya ga suka pake ini
karena lambat
saya di cli nya pake
pake di terminal
saya justru
bukan pake ini kalau mau liat
hasil kan
tapi ya yes ini lebih lengkap ya
tapi untuk melihat
core web vital saya lebih suka pake
itu
performance step
bukan performance step
ada satu lagi yang pernah saya share
dulu apa namanya
performance
performance inside
performance monitor
salah
karena dirimu bukan menggunakan
chrome
jadi
jadi ada
ada performance inside
jadi lebih suka pake
performance inside
light house ini bukan cuma performance ya
macem-macem
itu sebenernya handy juga
sih berguna buat kalau ngecek
semua sekaligus emang yaudahlah
pake CLI aja
cuma kalau misalnya cuma pengen ngecek
accessibility atau cuma
biasanya yang sering aku pake adalah
ngecek accessibility atau PWA
jadi apa
buat PWA itu kan ada kriteria kayak misalnya
manifest nya item nya apa aja
field nya apa aja itu kan sebenernya
kriterianya icon nya
maskable atau enggak
size nya gimana
ini praktis sih sebenernya pake light house ini
light house ini
hampir sama kayak firebox ya awalnya dia extension
chrome extension
terus akhirnya di ambil
di akwisisi
sama devtools
dimasukin ke langsung
sudah disediakan
build in dari chrome devtools
sama
dan ada satu lagi
yang simple
dan sering saya baca itu adalah
coba di klik yang tanda titik
ini
ya more tools
coverage
atau help ya
itu biasanya what's new
oh oh oh
documentation
what's new
what's new
what's new
nggak ada
kok nggak ada disini ya
komen cfp aja lah
what's
oh ada ada show what's new
nggak ada ya
ini apa ya pencah
show what's new
nggak ada
ini what's new aja coba
ini versi berapa
coba gue share ya
coba coba
ini khusus
kalau kita nggak sengaja
mencet escape muncul ini lagi
oh iya bener bener bener
iya iya
sering ke pencet
iya bener bener
iya kalau escape ini muncul
tunggu tunggu
ini nggak bisa
coba scale screen nih
mana
oh iqvan oke
tunggu ya gue
tuh what's new
ini lah yang menyebabkan
saya banyak tau
tuh selalu baca nih kalau misalnya
ini kan lagi di saya pakai chrome
oh udah ditutup
chrome dev ya 1.1.6
misalnya
pengen tau apa yang what's new
oh bukan
ayo udah
what's new misalnya
terus
ini yang saya bilang tadi performance insight
kalau misalnya teman-teman pengen tahu
kalau untuk
pertama
kalau hanya untuk nge-detek core
web vital saya udah pernah share juga itu
pakai rendering
bisa
core web vital
bisa nggak sih
core web vital
rendering core web vital
bisa lihat
hasilnya langsung
nggak perlu
like house
tetapi kalau misalnya
mau lihat lebih jelas
ini apa sih yang
yang mengalami layout shift
dan dom content loadingnya bagaimana sih
bisa saya eh bukan
performance salah
kalau performance bisa juga dipakai
karena bisa kelihatan timingnya
tetapi saya lebih suka
menggunakan performance insight
performance insight
dan saya throttling
4G
dan
slow 4 kali
terus saya record
salah
recordnya yang ini
record yang master page load
nanti
bisa lihat
layout shift
bisa lihat
dom content loaded
ada markernya
semua ya
jadi kalau
bisa saya magnify
bisa kelihatan juga
mana
di network mana yang
script yang berasal
dari internal atau domain
sendiri mana script yang dari third party
yang internal di dalam network
yang third party bisa kelihatan
jadi kalau kita lihat dari situs
ini
dia
dom content loadednya di 1.4
eh sorry
ini lcp
nya bisa kelihatan
apa lagi ya
terus
tools yang akhir-akhir ini saya suka
mulai favorit gunakan itu
rendering
karena bisa
apa isilahnya ini
overlay
bisa lihat
paint flashing
misalnya lihat ya
kalau saya reload ya
bisa lihat yang mana yang di render ya
kalau saya klik
mana yang di render ulang
terus kemudian bisa
lihat layer borders
lihat
border border nya enggak
layer ya
itu bisa liat di situ
kayak kotak-kotaknya
oh container nya ya
kayak diff
betul-betul
itu aja
disable local font
saya enggak suka pakai itu
saya pakainya pen flashing sama
layer border
frame rendering start
ya cukup sih
kalau bisa sih 60 fps
kalau bisa
kalau bisa
kalau sempat nge-scroll
nge-like kelihatan kan
dia bukan 60 fps
hit dock
that's it
ada lagi
ada lagi
accessibility
ah ya itu
nah itu
firefox
firefox lebih bagus kan
accessibility nya ya
iya enggak sih
yang paling praktis sih
coba command shift
command shift
accessibility
show accessibility
iya
jadi kita bisa liat
kita pernah bahas ya
di episode accessibility
detailnya
kan harus ada landmark
mana pengguna screen reader
terutama atau apa assistive device
lainnya itu kan navigasinya
berdasarkan namanya landmark
mana yang area utama
mana area navigasi
nah ini semua kita bisa liat
disini coba
mouse over di yang
root web area
atas
nah itu ke highlight kan bagian
yang dimaksud habis itu click
generic tuahnya generic itu diff
apa pun yang nggak ada makna semantiknya
jadi itu kayak container aja
terus generic lagi
akan skip ya
iya
jadi user yang menggunakan
apa pakai screen reader
atau assistive device nggak bisa loncat
ke generic tapi bisa loncat ke
banner lo misalnya
banner yang di highlight
coba scroll ke
skrol halaman utama katas banner
kalau kita mouse over
banner yang di highlight adalah
area banner-nya
harusnya sih
nah itu sih header-nya jadi user
misalnya lagi yang
pakai screen reader lagi di tengah-tengah
dia mau loncat kelik atas
bisa tuh bisa navigate ke
banner-nya
coba di area key panel
accessibility-nya scroll lagi ke bawah
nggak bisa di scroll
di accessibility
nah itu ada generic
ada main
main tuh main area-nya
yang dianggap isi utama dari halaman itu
terus
isinya ada article
click article lagi
click main tadi
main di panel
accessibility
ada article
itu harusnya ada
biasanya ada judulnya
ya itu punya
itu
article
di atas justru ya
disini
kok nggak kebaca
karena dalam satu halaman itu
kan cuma ada satu article ya
kecuali itu list of articles
nah terus ada subheading-nya juga
subheading-nya tuh ada kan tuh
main
article
ada subheading-nya juga
tadi ada subheading-nya
atas dikit
looking forward
looking back
itu kan subsection-nya
bisa scroll into view
juga mas Tiza
misalnya lagi
scroll dulu halamannya ke atas
terus tadi masuk
ke heading
dari H3 yang di atas
H3 yang di atas
click kanan
scroll into view
ada nggak scroll into view
nggak ada
kok beda-beda sih
harusnya bisa itu
udah lama itu scroll into view
nggak ada
click kanan
ini click kanan udah nggak ada
mau
lihat lagi
iya itu chrome bukan sih
break
mungkin
dihilangin
agak lain ya
coba click kanan
nggak ada kan
oh iya
beda dihilangin
kalau di chrome ada
jadi bisa scroll into view
dia otomatis nge scroll ke
elementnya itu
hmm
oke
ya
menyer
Facebook tiga
hmm
bisa dicek di situ
oke
ini role ini lumayan
dikenal juga salah satunya
gara-gara testing
yang menggunakan role
sebagai penanda
oh iya kalau kita get by role
nah itu bisa buat investigate
get by role terus levelnya level berapa
misalkan get by role heading level berapa
1,2,3,1,2,3
dan seterusnya
terus si property
3 ini
terutama berguna buat kalau misalnya
kalau ini kan halaman yang simple ya
cuma kayak single post
cuma satu artikel
di halaman itu isinya cuma satu artikel doang
tapi kalau misalnya kita
buat halaman yang strukturnya
lebih rumit misalnya e-commerce
halaman depan atau
kalau bukan e-commerce situs berita
atau situs apapun lah yang
ada section-sectionnya
terus satu section misalnya berita terbaru
chart post itu terdiri dari
beberapa artikel
nah itu perlu dicek dari
accessibility tree
udah betul atau belum strukturnya
terus gampang atau nggak untuk
dinavigasi antar section dan
antar artikel
iya
mantap
terus masih accessibility juga nih
color contrast kita bisa liat langsung
bisa liat
mana-mana
ya kan
ke 3 nya
terus kita klik computed
oh
ya mana
kosong
kok kosong sih
ya ada color sih
kok aneh
kok bisa hilang
biasanya semua property nya muncul disitu
semua property
nah ya
color color
oh ini color
kanan bawah color
klik buka
oh klik yang T nya
putih itu RGB
ini
klik warnanya
klik
kotak
kotak warna putihnya itu punya
nggak ngaru
nggak keluar apa-apa
klik panahnya kesini tadi
nah terus
coba hover di
kotak potihnya
nah
no contrast information
nah ini kadang-kadang nggak sih
ini agak hit and miss
bisa kelihatan
di tempat gua bisa kelihatan
web.dev coba
coba buka
web.dev
nah udah slide apa aja
lah event timing API
computed
ini kita close dulu
terus di bawahnya
color
RGB
oh kok
kenapa ya
bentar bentar
biasa biasa
bisa nih sempat gua bisa kalo mau liat
boleh boleh mana
oke ntar
sekalian nanti abis ini mau demo-in
asik
ah
oh
pindahin dulu
nah tadi kan
ini kan
location
inspect
ada reading mode lho sekarang
baru tau
oh iya udah di announce pas I/O kemarin
di top siapa gitu
oh topnya ada Margel
location kan
google computed
contrast ratio
coba ganti warnanya ke
warna yang abu-abu muda
kesukaan desainer
AAA gitu
contrast ratio
satu tujuh satu
nggak lulus
ini ada ini nih ada
bukan nih garis nih
kalo di AAA
di itu ke atas udah nggak
lulus AAA
kalo mau triple A harus ke bawah
tuh masih
bagus tuh
jadi kalo AAA itu
itu standar yang
menengah yang standar
accessibility yang ya menengah
biasa kalo aturan apa aturan
resmi hukum tuh pakainya itu
kalo AAA bukan baterai nih
AAA itu standar yang
paling strict yang maksudnya
yang accessible banget dan biasa itu
agak spesifik sih jadi misalnya untuk
institusi yang emang untuk
pernah kita bahas di accessibility
oh iya
pernah kita bahas
nah itu jadi
sekarang udah gampang udah nggak bisa
excuse ah repot tribut meriksanya
nah ini bisa langsung di DevTools
tadi kok ada
leading mode? mana sih?
iya ada
salah
kok ilang?
nah kalo si leading mode ini
yang di luar aja di safari
udah ada agak lama
iya udah lama oh bisa begini ya
keren
oke nah
gua mau demoin
breakpoint tau nggak kalo
ini bisa breakpoint
itu juga sering pakai
ya dibagi
contohnya
source
ini gua hapus dulu
dia punya
blocking segala macem
refresh
terus mau
cari
source apa ya
nah ini kebetulan dia buka
main.js ya
main.js nya dari situs ini
nah asal
aja ya saya pakai
saya mau
ini aja
terus
saya bikin
breakpoint
saya refresh
oh ternyata
dia nggak lewat disitu
terus kita disini aja deh pasti
kita
tuh dia
nge-stop di
eksekusi javascriptnya
nge-stop disini nanti kita bisa
check variable
check variable nya apa
ini kan karena sudah di
minify ya kalo nggak di minify kan
kalo misalkan javascript tolong
temen belum di minify bisa keliatan lebih baik
jadi bisa step over
step into segala macem
sama bisa terus
terus saya paling suka pakai ini
kalo lagi nge-debug jadi
memang masih pertama
saya kalo nge-debug pakai console lock
pengen tau value nya apa
tapi kalo sudah sampai kayak
bigung ini kenapa sih
masih nggak bisa saya pakainya
debugger
bisa langsung ngeliat isinya apa
dari setiap step-stepnya
dan kalo sudah nemu bugnya
ya tinggal dijalani udah
biasanya sih
kalo gue pribadi
console lock itu buat nge-check
bentuk data lebih sering itu
jadi maksudnya nggak ada error kan
nggak selalu ada error beneran
tapi pengen tau datanya kayak gimana
itu juga overlapped bisa di-check dari
network request kan
nah cuma
breakcoin ini berguna banget kalo tiba-tiba
ada error
error yang belum kayak handle nggak tau dari mana
dan itu breaking sesuatu
misalnya ya udah check aja
satu persatu di bagian-bagian yang
keliatannya mencurigakan
kalo masih lancar belum muncul errornya
berarti bukan dari sini
check tersangka selanjutnya
kalo misalnya
nyampe situ errornya
muncul berarti
ada sesuatu yang perlu di-check lagi
bisa juga jadi kayak marking
bahasanya bisa juga
either mau pake console atau mau
pake debugger terserah
intinya kalo pake debugger itu
kita bisa di-idea step-by-step
gitu ya
terus karena
kita bicara console
console itu nggak cuma console.lock ya
temen-temen
kalo liat console itu isinya apa
klik aja console
enter, terus kemudian misalnya
ada assert, clear
context, count
ada table juga
ada lock
ada info
ada error dan segala macem
ada debug kalo misalnya
di scriptnya temen-temen
masukin console.debug itu
di
line-nya
waktu di jalanin
devtool, direload
maka waktu di debug itu
akan nge-stop disitu dan debuggernya
otomatis jalan
sebetulnya jujur dari sebanyak
metode ini yang pernah
gue pake tuh cuma selain lock
warn info sama time
udah kalo time itu biasanya buat nge-check
trace condition atau semacamnya
pake table
pake table juga suka
itu buat apa sih? coba-coba
kok unexpected number?
itu objek apaan?
maksudnya array?
atau gimana?
misalnya asal aja kayak...
itu kan key value store, nggak bisa
kalo mau array
console.table
console.table
jadi keren bentuknya
itu
menarik
cuman sayangnya
kayak console.info
console.warn, console.error
di note.js nggak ada ya?
iya, di note.js nggak ada, di backend nggak kelihatan
warna-warnanya
padahal seru kalo misalkan ada warna begitu ya
jadi ini hanya bisa berlaku di browser
aja, walaupun nggak error ya
walaupun kita pake console.warn itu terpada
console.lock jadinya
metode-nya ada, cuma print nggak berfungsi
tidak berfungsi
ya, kalo time tetep-tetap
ya kalo time ya
gimana sih pake console.time?
console.time
ya udah, jalanin mapnya aja
udah
default already exist
anyway
dah, itu
debugger bisa dipake
juga console
ada lebih dari satu, bukan cuma console.lock
apa lagi ya?
security
css overview juga
menarik sih
hmm, yang itu apa?
unused css
oh ya, coverage, coverage
coverage
coba kita cek
misalkan
ceknya dimana ya?
itu di more tools
more tools ya?
ya, more tools
eh, salah
more tools
tools, coverage
refresh ya?
kok cuma ini aja?
belum selesai kali?
css
itu, contohnya tuh
oh, lambat soalnya di drop-in tuh
kan di network ada icon warningnya tuh
jadi lambat
soalnya slow 3G
kan lagi di troto
mana tadi? kok ilang?
oh, ini coveragenya di bawah
iya
ini
js, js semua ya?
itu css paling atas?
oh ya, next css
ini pake next js
nah, disini ada nih
unused bytes
disini 64%
keliatannya dari mana?
yang tidak digunakan itu yang merah ya?
iya
kok gak ada?
adanya hijau biru doang
kok gak ada yang mana?
aneh sekali
di klik, di kliknya bisa gak di klik?
udah di klik, ini di klik
nah, kalo ini merah tuh banyak tuh
oh iya
importnya masa gak dipake
kalau diapus, error dong
tapi kan, buat halaman ini
ya, buat halaman ini gak dipake
cuma mungkin dipake di halaman lain
oh iya, bisa jadi
sebetulnya, nah
cuma kan kadang kalo misalnya
baru pengen premature optimization
semua di pisah jadi banyak
tapi kan sebenernya ini statik
kan ini di cached, jadi ya sebetulnya
gak apa-apa juga sih, kalo emang
hasil performance yang lainnya baik-baik aja
cuma minimal kita
kita punya senjata ya
kita punya tambahan senjata lah
terutama biasanya css
css yang paling seringnya
terutama kalo kita pake legacy
misalnya, dululah jaman dulu itu
bootstrap dari kapan, cuma gak ada yang
nyenggol atau
mubek sama sekali, takut
berubah semua, makin lama makin banyak
makin numpuk
ini, bisa lah
terus kita
mungkin kita pengen ngerapihin pelan-pelan
tapi kan, rendah ngeri juga
takut nyenggol sesuatu
jadi kita bisa pelan-pelan
pake ini buat ngebantu liat
mana yang gak pernah dipake
iya, ini contoh
ekstrim ya, contoh ekstrim, kayak saya gak yakin
ada yang mengalami
tapi misalkan nih, teman-teman
mau pake bootstrap
tapi hanya button-nya aja
yang lainnya pake yang lain
atau yang lainnya bikin sendiri
kan sayang ya, maksudnya
bootstrap itu ada berapa kilobyte gitu kan
berapa puluh atau berapa ratus kilobyte pake button doang
yang lainnya ya diapos aja
berarti harus ke source-nya ya, kalo itu ya
bootstrap kan sudah bisa
udah modular dia ya
import-import ya
sekarang ya
iya, tinggal pake yang mau aja
kalo nggak ya, tailwind kan aja lah
pusing amat
misalnya kita dapet kode orang lain
kode dari jaman, gak tau kapan
kode dari jaman firebat masih
ngetrele
ya mungkin use case-nya lebih kesitu sih
kalo bikin baru ya itu tadi
bahkan vanilla CSS pun udah cukup canggih
kalo mau yang lebih khasis
apalagi yang kita dapat
misalkan
dia bikin sendiri misalkan
bootstrap perjuangan
.min.css
source-nya gak dapet
yang minimisenya aja yang dapet gitu kan
ya gak apa-apa kalo itu
sekarang kan udah bisa di agnify lagi tuh
iya, dibalikin lagi
terus abis itu ya bisa pake ini kan
css kan
ngomong soal css
kita bisa nambah nih ada
apa tuh
css overview
more tools
tadi keliatan
masih itu
sebentar tanda
ini eksperimen ya
lab
klik
matiin dulu, ya capture overview
pencet dulu
nah bisa liat nih overview dari
kira-kira ya kita di halaman ini
ada 2700 elemen
color
palette yang digunakan
text color
terus yang mana yang
kontrasi issue
font yang dipake apa
terus fontnya dipake dimana
berapa kali occurrence-nya
oh wow
itu kenapa sih fontnya 16,6506px
random banget
itu kayaknya dikalkulasi secara random
ngindarin cls
apa biarnya shifting
terus kemudian
unused declaration
itu ada juga
nah ini yang gak pakai
terus media query yang kepakai
apa
jadi bisa juga liat
kalau kalian misalnya punya media query tertentu
mana yang gak kepakai juga bisa keliatan sih
nah itu tadi
kan udah nambah
717px segala macem
mungkin media query yang dipake dulu
udah obsolete atau kurang
sesuai
ini enak ya liat overview-nya dari sini
coba masuk ke overview summary
mungkin temen-temen di sini
ada yang masih
penyuka id selektor
yang mungkin harus berubah haluahan
mana id
kan itu ada id selektor 0 kan
oh iya
itu loh id selektor
kalau misalnya
kebanyakan pakai id selektor
yang mungkin harus
segera
ya kan terlalu
spesifik
kalau bisa
ngasih style itu kan
lebih general
tergantung lah ada yang mau pakai
block element modifier
ada yang mau pakai modular
gak salah tapi kalau misalnya terlalu banyak
di id-in semua ya
berarti size css-nya makin gede
oh iya maksudnya
mungkin risiko aja
kita pusing
footer misalnya di halaman
ada footer, lalu ternyata kenapa
kita kasih id footer, tapi di
section atau di mana lah
di suatu pose gitu
posenya ada footernya juga
terus ya kayak
mental overload aja
kita harus kasih kan id itu
harus dalam satu halaman
harus cuma satu
kalau misalnya semua di id-in
tambah beban aja sih
lebih baik
diutamakan
ke class
ke type
atau attribute
biar sekalian
kalau data attribute
biar sekalian mengaplikasikan
accessibility
yes
betul sekali
oke
ada lagi kah yang mau dibahas
habis
devtool pak 2
kapan pun
oh iya ini
pertanyaan, ini kan
buat
ya buat saya pun
beberapa fitur
performance tadi kan
ivan kan udah biasa kan main
kalau buat saya yang awam
itu kayaknya overwhelming banget gitu
devtool secara umum juga kayaknya overwhelming banget kan
kalau mulai belajar itu
enaknya dari mana ya, buat temen-temen
ngobrolin web
asik
selain dari ngobrolin web
terlalu frontal kali
terlalu
self-proclaim ya
terlalu harsel
ini ya
bisa cek di
developer.chrome.com/
text/devtools
oke
nah ini kan itemnya sebenernya banyak banget
dan kayaknya sebetulnya
gak perlu juga ya kita
pelajarin urut satu persatu
ngapalin kayak mau buat ujian gitu ya
sebenernya gak penting kan kita pick and choose
aja bagian, kita lagi perlu optimize
apa nih, nah misalnya kita lagi perlu
find form issues ya udah kita
buka itu, pelajarin itu
artikel-artikelnya sih enak sih
gampang di cerna, dan hampir selalu
ada videonya, dan biasanya mba Jocelyn
itu yang apa, yang present
jadi maksudnya kita gak harus
menguasain beneran semua kan
fiturnya banyak banget tuh tadi
cuma banyak hal-hal
yang menarik dan berguna yang mungkin kita
kelewat, nah jadi kita bisa
apa, cek di blognya itu
ada komen dari
NyanJS
tentang, by the way, pernah pake eruda gak?
eruda? gak pernah
eruda itu apa sih?
itu, console
for mobile
browser itu tulisannya, belum pernah pake sih
tapi
dia bisa kayak drag
console di android
oh, buat ngedibak android
gitu maksudnya
url browser
jadi, kalau di android
kalau di android kan
kalau di mobile
buka deh, buka, buka aja eruda
.lyri.io
android
jadi kayak
kayak
eruda apa ini
lyri.io
tapi keren sih, coba aja klik salah satu
kalau monitor, klik aja
di plugin, ya monitor lah
mungkin
klik aja, terus nanti keluar kan ininya
tuh bisa kelihatan console, jadi kalau lagi di mobile
bisa ada overlay ini
jadi kayak gak perlu
kalau
kita kan mau
ngedibak di mobile, saya
pakenya remote debugging tuh
bisa disambung ke chrome
terus pake cable, remote debugging
bisa, iya kan, pake cable kan ya
ya, USB
USB debugging, nah ini mungkin lebih simple
thank you, thank you mas Jan
belum pernah pake
wah coba, keren sih
berarti bisa
gak mesti di
bisa di ini juga dong ya, bisa di
safari coba ya
oke, nah berikutnya
kalau mau belajar lebih lanjut
temen-temen bisa ke channelnya
youtube channelnya chrome dev
cari aja, atau youtube.com/
@chromedev
pake S, liat di bagian
bawah, nah di sini
ada what's new in devtools isinya adalah
jislin semua
siapa yang nonton
kertian dia
tiap minggu, eh tiap minggu apa tiap bulan
dia ada update yang baru, tentang
devtools
berserta dengan apa ya
versi chrome yang
muncul kan, jadi 103, 104
sampai sekarang sudah 112
silahkan
ditonton aja
saya tonton ini
gak abis-abis
oh iya damar
kalau devtools gs framework
nukes devtools harus ditiru semua framework
kenapa tuh, boleh tahu gak alesannya
saya jadi penusaran
nah kita bikin, ini bisa
dijadikan episode sendiri ini devtools
tapi integrasi dengan extension
atau library
kan kayak, yang ini ya
karena masih ada react
devtools, masih ada
redux devtools
ada suspect
gak ada ya
view, ada view
iya ada view
atau yang third party yang
berdasarkan fungsi, misalnya
x to accessibility, masih buat
accessibility, kalau yang baru
devtools asli kan, ya masih terbatas banget
tuh, nah biasa kalau
accessibility, pakai x atau semacamnya
apa tuh namanya, gue lupa deh
itu muncul
accessibility
inside for web
yang dari punya si
edge
accessibility inside
for web, bagus
nah itu biasa munculnya
di devtools, jadi ada tab baru
ya sama lah, mirip kayak tab lighthouse
gitu, cuma ini third party
detail banget, kayaknya kita
pernah ke sini juga ya
pas episode accessibility
nah itu
banyak juga yang sudah kita bahas
iya, belum pernah pakai nax
jadi belum pernah pakai devtools
tapi ini seru sih, maksudnya third party integration
beberapa hari
yang lalu, saya pernah
pernah dapat
promo
course, tentang nax.js
katanya, nax.js ini adalah salah satu
framework yang developer
experience-nya bagus
makanya tadi begitu dikasih tahu
jadi penasaran, apa sih bagusnya
gitu
kalau sveltekit
devtools integration-nya bagusnya ya
sveltekit, nggak ada
kan sveltekit
nggak ada devtools gitu-gitu kan
mungkin ada library
tambahan
masalahnya kan dia di compile
itu yang agak ribet
kalau dev environment
mungkin bisa nggak tahu
ya nggak tahu sih, tapi belum ada sih
sejauh ini, belum tahu
mungkin ada, tapi kita belum tahu juga
kalau teman-teman yang menonton
kayaknya nggak ada yang penggunaan
juga
apa tuh?
misalnya lihat nih bagian features
ke
getting started
terus kemudian ke features
scroll
scroll
nah, scroll terus
jadi bisa kayak ngelihat
per komponen, per
wow
ada
tree-nya juga ya
dom tree, iya
tapi justru
jangan-jangan nax devtools ini
lebih bagus dari view devtools, ada nggak sih
view devtools
view devtools ada
yang dia nempel ke
chrome devtools gitu kalau nggak salah
iya
kalau nggak salah ya
kalau react kan ada juga, kita bisa liat tree-nya
di react devtools
regardless nggak peduli kita pakai
framework apapun
kalau misalnya masih react
react dan devmob
bisa ngeliat tree-nya
oke, wah ini menarik nih
untuk di pelajari
view devtools ada
view devtools ada
UIKit
UIKit ini apa?
devtools UIKit
oh, jadi kita
bisa integrasi dimasukin
ke devtools-nya ya
oh, seru ya
seru ya ekosistemnya ya
ekosistem devtools ini
ide episode
coba masukin
ya, tulis, tulis, tulis, tulis, catat, catat
mantap
advanced devtools ekosistem
devtools
system dalam kurung
max devtools extension
react devtools
redux
misalnya, di antara kita bertiga
belum ada yang pengalaman
menggunakan view ya
kita undang nggak sih
kita harus cari orang yang menggunakan view
iya, eh ada komunitasnya nggak sih
view ID
ada, pasti
damar aja kita undang gimana
demo in max devtools
deal, deal, deal
langsung ditembak
kalau nggak komen, berarti iya
opin ya
opinionated sekali
orang dia
nggak nonton lagi
jadi nggak belas
iya, iya, iya
iya, iya, iya
oke, oke, oke
nanti kita carilah ya, mudah-mudahan damar mau ya
kalau nggak, kita harus cari orang lain
oke, oh cuma bagus kan
di bikin seri ya, kita bahas library
atau framework, tapi
tetap dari perspektif disambungin
sama teknologi web
betul, betul, betul
oh iya, ini ada komen
sedikit ini ya, damar juga ya
tailwind atau uno css
mungkin tuh, eh vanille aja
nggak bisa
coba, kalau bisa
kalau kenal sih
boleh dikenalin, bagiin nomor
whatsapp-nya dong
ternyata yang muncul
apa dia nggak pilih whatsapp ya
Envandy Mas
ini tailwind
atau uno css, uno css ini
yang bikin si itu kan
si Anthony Fu
dia produktif banget sih
dia juga dari
ekosistem Vue.js kan
dia pakai Vitez ya
dia yang bikin Vitez ya
sama kemarin
Iseng nyobain ini
Open Props
yang punya Arjal
itu keren juga sih
itu keren juga
karena itu pure css ya
berbasis custom properties
variable
tapi kita harus benar-benar
bisa css
kalau tailwind kan kita masih bisa
coba-coba ya, oh mungkin ini
kalau ini
kita benar-benar harus bisa tahu
vanilla css-nya, baru bisa pakai
gitu, oke
ada lagi, ada lagi
penutup, penutup
udah, oke
kalau nggak ada
kita udahan dulu, teman-teman terima kasih banyak
buat obrolannya
malam hari ini seru-seru
dan banyak belajar juga
saran topik seperti biasa
bit.ly/
otomatis kan
pakai operator
pakai operator, oke sekian dulu
buat malam ini
kita ketemu lagi insyaAllah minggu depan
selamat malam, selamat istirahat
jaga kesihatan, bye bye
Deskripsi asli dari YouTube
Yuk mari kita diskusi dan ngobrol ngalor-ngidul tentang dunia web. Agar tetap up-to-date dengan teknologi web terkini. Topik, tautan dan pertanyaan menarik bisa dilayangkan ke https://bit.ly/ngobrolinweb Kunjungi https://ngobrol.in untuk catatan, tautan dan informasi topik lainnya.
Episode Terkait
30 Mei 2023
Ngobrolin Core Web Vitals
Core Web Vitals dibahas mulai dari alasan kemunculannya. Sebelum ada patokan bersama, orang mengukur kecepatan dengan YS...
26 Agu 2026
Modern Web UI
Episode ini berangkat dari satu keluhan yang sangat spesifik: web UI jadi berantakan begitu fitur LLM ditempelkan ke apl...
15 Jul 2026
Optimasi JavaScript
Episode ini membedah teknik optimasi JavaScript, dimulai dari prinsip paling mendasar: avoid work. Cara paling efektif m...
Suka episode ini?
Episode baru setiap Selasa malam. Dengarkan lewat YouTube, Spotify, atau feed podcast favoritmu.
Memuat komentar dari GitHub Discussions...
Jika komentar tidak muncul karena ekstensi privasi / adblocker, kamu bisa berdiskusi langsung di GitHub Discussions .