Pertanyaan Alat Pengembang Chrome: Apa itu Dukungan Cuplikan?


Mulai versi 19, Web Inspector Chrome memiliki fitur eksperimental yang disebut "dukungan cuplikan". Berikut ini cara mengaktifkannya:

  1. Buka chrome: bendera, aktifkan "percobaan Alat Pengembang", mulai ulang.

  2. Buka Web Inspector (Alat Pengembang), klik ikon roda gigi pengaturan di sudut kanan bawah, aktifkan "Dukungan cuplikan", mulai ulang.

    enable snippets support

  3. Buka panel Script, klik ikon "navigator tree" di sebelah kiri, dan cari tab Snippet yang kosong.

    snippets tab

Pertanyaanku adalah: Apa yang bisa saya gunakan ini? Bagaimana saya bisa mengisi ini dengan cuplikan?


76
2018-05-06 13:01


asal


Jawaban:


Singkatnya, cuplikan adalah konsol multi-baris, alur kerja pengembangan JS yang berulang, dan toko yang terus-menerus untuk pembantu debugging umum.

developers.google.com/chrome-developer-tools/docs/authoring-development-workflow#snippets

Beberapa penggunaan-kasus Cuplikan dapat membantu dengan adalah:

  • Bookmarklet - Semua bookmarklet Anda dapat disimpan sebagai cuplikan, terutama yang ingin diedit.
  • Utilitas - Membantu debugging untuk berinteraksi dengan halaman saat ini dapat disimpan dan dibebani. Daftar utilitas yang dikurasi oleh komunitas tersebut tersedia.
  • Debugging - Cuplikan menawarkan konsol multi-garis dengan penyorotan sintaks dan ketekunan, membuatnya nyaman untuk mendebug kode yang lebih dari satu baris.
  • Kode penambal-monyet - kode yang ingin Anda patch saat runtime dapat dilakukan melalui Snippet, meskipun sering kali Anda tinggal mengedit kode di tab Sumber.

snippets screenshot

Terakhir, saya pribadi telah mengumpulkan beberapa cuplikan umum yang mungkin Anda sertakan dalam gudang senjata Anda: github.com/paulirish/devtools-addons/wiki/Snippets


Untuk menjalankan cuplikan dengan cepat, sekarang Anda dapat melakukan ini. Ctrl-Shift-P untuk "palet perintah", lalu backspace, dan gunakan a! awalan, lalu ketik nama potongan mana yang ingin Anda jalankan.

enter image description here


83
2018-05-07 18:15



Saya bertanya kepada Paul Irish jika dia tahu tentang hal itu, dia juga tidak yakin, tetapi mengatakan itu belum sepenuhnya diimplementasikan dan mengarahkan saya ke pelacak bug, saya menemukan kepalanya tiket dan melihat beberapa kode, diff memiliki banyak FIXME: To be implemented. komentar.


12
2018-05-08 13:53



Klik kanan untuk membuat yang baru.

Chrome DevTools Snippets — New


9
2017-11-12 12:34



Dukungan snipet Alat Pengembang Chrome memungkinkan untuk membuat / mengedit / menyimpan dan menjalankan cuplikan kode javascript.


5
2017-07-06 20:17



Saya tidak dapat mengaktifkan eksperimen itu sendiri (tidak ada Developer Tools experiments di dalam saya chrome:flags, tetapi dari Safari, saya temukan ini penjelasan:

Singkatnya, itu "adalah sedikit utilitas yang memungkinkan Anda untuk memasukkan blok HTML dan CSS dan membuatnya diberikan dengan cepat".

Dari pos blog, tampaknya itu adalah buggy di Safari, jadi mungkin Chrome belum menerapkannya.


3
2018-05-08 13:21



Anda dapat menemukan daftar cuplikan yang berguna di sini http://bgrins.github.io/devtools-snippets/

salah satu snipet yang berguna adalah 'jquerify.js' - Menggunakan ini Anda dapat menyertakan jQuery ke halaman mana pun jika belum dimasukkan.


3
2017-08-19 09:49