Catatan rilis Chrome DevTools di Google Chrome 74.

Video
https://www.youtube.com/watch?v=I14fXc7sXdU

Catatan rilis dan penjelasan
https://developers.google.com/web/updates/2019/03/devtools

New to DevTools in Chrome 74:

- Highlight all nodes affected by CSS property
- Audits panel updates
- Binary WebSocket message viewer
- Capture area screenshot
- Service worker filters in the Network panel
- Long tasks and First Paint in performance recordings
- Bonus tip! View HSL and RGB color values

#chrome #devtool #release

Cara melakukan debug dengan Firefox Developer Tools

https://medium.freecodecamp.org/how-to-debug-web-apps-with-firefox-developer-tools-64a9f531af90


#firefox #devtool

Catatan rilis Chrome Dev Tools 75

Video catatan rilisnya
https://www.youtube.com/watch?v=6zKPwOMFsa4

Blog catatan rilisnya :
https://developers.google.com/web/updates/2019/04/devtools

Daftar catatan rilisnya :

- Meaningful preset values when autocompleting CSS functions
- Clear site data from the Command Menu
- View all IndexedDB databases
- View a resource’s uncompressed size on hover
- Inline breakpoints in the breakpoint pane
- Setting for disabling the detailed inspect tooltip
- Setting for toggling tab indentation in the Sources panel editor
- Dark theme bonus tip!

#chrome #release #devtool

Beberapa fungsi Firefox Devtools yang dapat dipakai dalam pengembangan web

https://dev.to/gabe/four-firefox-dev-tools-i-use-daily-212l

#firefox #devtool

Contoh penggunaan Network Tab Feature di Chrome Dev Tools

http://www.discoversdk.com/blog/awesome-network-tab-features-you-never-heard-of

#network #chrome #devtool

Debugging CSS Grid dengan Firefox Dev Tools

https://scotch.io/tutorials/debugging-css-grid-with-firefox-dev-tools


#firefox #css #grid #devtool

Tips penggunaan Vue Devtools

https://blog.logrocket.com/5-vue-devtools-hacks/

#vue #devtool

Beberapa tips penting dalam menggunakan Firefox Developer Tools

https://medium.com/@lakatos/30-tips-tricks-with-the-firefox-developer-tools-2e3f2ca5bc61


#firefox #devtool

Beberapa alat tools penting untuk pengembangan aplikasi web berbasis Vue JS

https://blog.bitsrc.io/top-10-vuejs-developer-tools-becd61375447


#vue #devtool

Akses Color Scheme dengan Chrome Dev Tools

https://twitter.com/addyosmani/status/1218797740970270720?s=09

#chrome #devtool

Referensi beberapa developer tools untuk Angular yang penting untuk dicoba.

https://blog.bitsrc.io/11-top-angular-developer-tools-for-2020-3d2621f1e157


#angular #devtool

Beberapa ekstensi browser yang penting untuk pengembangan aplikasi web

https://medium.com/better-programming/13-must-have-browser-extensions-for-web-developers-7f4f3b1c623d

#extension #chrome #devtool

Mengukur performa dan optimasi performa dengan React Profiling di React DevTools

https://addyosmani.com/blog/profiling-react-js/


#react #devtool #performance

Tips sederhana mengambil screenshot element web dengan Google Chrome DevTools

https://dev.to/nas5w/taking-pixel-perfect-screenshots-every-time-using-chrome-devtools-3h31

#screenshot #chrome
-

Tips debugging dengan Chrome DevTools
https://itnext.io/the-most-powerful-debugging-feature-on-chrome-that-youre-probably-not-using-b7e95dfd0d1c

#debug #devtool
-

Cara mendeteksi tab browser yang menganggur dengan JavaScript
https://dev.to/vorillaz/how-to-detect-idle-browser-tabs-with-javascript-88n

#idle #browser #tabs

Latihan membuat ekstensi Google Chrome untuk melakukan blokir block beberapa website dengan Chrome API

https://dev.to/penge/learn-the-most-useful-chrome-apis-by-creating-block-site-chrome-extension-2de8

---

Beberapa fitur baru di Google Chrome DevTools versi 85

https://blog.logrocket.com/whats-new-in-devtools-chrome-85/

---

#chrome #block #devtool

Latihan panjang penggunaan Chrome Dev Tools untuk debugging dan Inspect error

https://medium.com/javascript-in-plain-english/use-chrome-devtools-like-a-senior-frontend-developer-99a4740674

#devtool #chrome

Tips memuat font dari Google Font atau layanan eksternal agar tidak terjadi render blocking dan mendapat penilaian Lighthouse yang bagus

https://css-tricks.com/how-to-load-fonts-in-a-way-that-fights-fout-and-makes-lighthouse-happy/

---

Latihan panjang memuat gambar agar menjadi responsive dan sesuai dengan ukuran container element gambar tersebut

https://dev.to/manu4543/responsive-images-a-reference-guide-from-a-to-z-30aa

---

Beberapa tips menggunakan Chrome Devtools untuk proses debugging tampilan aplikasi web

https://dev.to/jeferson_sb/devtools-features-you-might-not-know-about-371m

#lighthouse #font #renderblocking #image #responsive #devtool #chrome

Catatan rilis beberapa fitur baru dari Chrome Dev Tools untuk Google Chrome 89

https://youtu.be/VtaRYSBIbU4

#chrome #release #devtool

Beberapa cara dalam membuat element HTML ke tengah dengan bantuan CSS

https://dev.to/rajatkapoor/4-ways-to-perfectly-center-content-using-css-5hfi

---

Melihat beberapa fitur Devtools browser yang mendukung layouting dengan CSS dan HTML

https://chenhuijing.com/blog/devtools-for-css-layouts-2021-edition/

---

#center #css #devtool

Kumpulan tools yang membantu untuk proses development front end web

https://blog.devgenius.io/11-amazing-frontend-development-tools-that-you-should-use-in-2022-b12c64caa346

#tools #devtool