Begini bagaimana saya menyelesaikan bug pelik menggunakan strategi debugging yang dicuba dan benar

Ingat kali terakhir anda menemui pepijat yang berkaitan dengan UI yang membuat anda menggaru kepala anda selama beberapa jam? Mungkin masalah berlaku secara rawak, atau berlaku dalam situasi tertentu (peranti, sistem operasi, pelayar, operasi pengguna), atau hanya tersembunyi di salah satu daripada banyak teknologi front-end dalam projek?

Saya baru -baru ini mengalami kerumitan pepijat UI sekali lagi. Saya baru -baru ini menetapkan pepijat yang menarik yang menjejaskan beberapa SVG dalam penyemak imbas Safari tanpa sebarang corak atau alasan yang jelas. Saya telah mencari sebarang soalan yang sama, dengan harapan dapat mencari beberapa petunjuk, tetapi tidak ada hasil yang berguna. Walaupun halangan, saya berjaya memperbaikinya.

Saya menganalisis masalah dengan menggunakan beberapa strategi debugging berguna yang saya juga akan meliputi dalam artikel ini. Selepas menyerahkan pembetulan, saya teringat tweet yang disiarkan oleh Chris lebih awal.

Tulis artikel yang anda ingin cari ketika mencari Google.

- Chris Coyier (@chriscoyier) 30 Oktober 2017

... Kami ada di sini.

Penerangan Masalah

Saya dapati bug berikut dalam projek yang sedang berlangsung. Ini adalah di laman web yang dalam talian.

Saya mencipta contoh codepen untuk menunjukkan masalah ini supaya anda dapat menyemaknya sendiri. Jika kita membuka contoh di Safari, butang mungkin kelihatan seperti yang diharapkan apabila memuatkan. Walau bagaimanapun, jika kita mengklik dua butang pertama yang lebih besar, masalahnya akan muncul.

Setiap kali pelayar menarik peristiwa , SVG yang diberikan dalam butang yang lebih besar tidak betul . Ia hanya dipotong. Ia mungkin berlaku secara rawak apabila memuatkan. Ia mungkin berlaku apabila skrin saiznya. Tidak kira apa keadaannya, ia akan berlaku!

Inilah penyelesaian saya untuk masalah ini.

Pertama, mari kita pertimbangkan persekitaran

Adalah idea yang baik untuk mengkaji semula butiran projek untuk memahami persekitaran dan syarat -syarat untuk pepijat.

• Projek ini menggunakan React (tetapi jawatan ini tidak memerlukannya).
• SVG diimport sebagai komponen React dan digariskan ke HTML melalui Webpack.
• SVG dieksport dari alat reka bentuk dan tidak mempunyai ralat sintaks.
• SVG menggunakan beberapa CSS dari stylesheets.
• SVG yang terjejas terletak di HTML<div> Di dalam elemen.<li> Masalahnya hanya muncul di Safari (dicatatkan pada versi 13).</li> <h3 id="Soalan-mendalam"> Soalan mendalam</h3> <p> Mari kita lihat soalan ini dan lihat sama ada kita boleh membuat beberapa andaian mengenai apa yang sedang berlaku. Bugs seperti ini boleh menjadi rumit dan kita tidak akan tahu apa yang sedang berlaku. Kami tidak perlu 100% betul pada percubaan pertama, kerana kami akan melangkah langkah demi langkah, membentuk hipotesis yang dapat kami uji untuk menyempitkan kemungkinan sebab.</p> <h3 id="Bentuk-andaian"> Bentuk andaian</h3> <p> Pada mulanya, ini kelihatan seperti isu CSS. Sesetengah gaya boleh digunakan dalam peristiwa hover, memecahkan susun atur atau sifat limpahan grafik SVG. Ia juga kelihatan seperti masalah yang berlaku secara rawak apabila Safari membuat halaman (lukisan peristiwa ketika mengubah saiz skrin, melayang, mengklik, dll).</p> <p> Mari kita mulakan dengan jalan yang mudah dan paling jelas dan menganggap CSS adalah sumber masalah. Kita boleh mempertimbangkan kemungkinan pepijat dalam pelayar Safari yang menyebabkan SVG rendering tidak betul apabila gaya tertentu digunakan untuk elemen SVG (seperti susun atur flex).</p> <p> Dengan berbuat demikian, kita <strong>membentuk hipotesis</strong> . Langkah seterusnya adalah untuk menubuhkan ujian yang sama ada mengesahkan atau menyangkal hipotesis. Setiap hasil ujian menghasilkan fakta baru mengenai pepijat dan membantu membentuk andaian selanjutnya.</p> <h3 id="Memudahkan-masalah"> Memudahkan masalah</h3> <p> Kami akan menggunakan strategi debugging yang disebut <strong>penyederhanaan masalah</strong> untuk cuba menentukan masalah. Syarahan CS Cornell menggambarkan strategi ini sebagai "cara untuk secara beransur -ansur menghapuskan bahagian -bahagian kod yang tidak berkaitan dengan pepijat."</p> <p> Dengan mengandaikan bahawa masalah itu terletak pada CSS, akhirnya kita dapat menentukan masalah atau menghapuskan CSS dari persamaan, dengan itu mengurangkan jumlah sebab yang mungkin dan kerumitan masalah.</p> <p> Mari cuba mengesahkan andaian kita. Jika kita buat sementara waktu mengecualikan semua stylesheets bukan pelayar, masalah itu tidak boleh berlaku. Saya melakukan ini dalam kod sumber saya dengan mengulas baris kod berikut dari projek.</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"> &lt;code&gt;import 'css/app.css';&lt;/code&gt;</pre><div class="contentsignin">Salin selepas log masuk</div></div> <p> Saya mencipta contoh codepen berguna untuk menunjukkan unsur -unsur ini yang tidak mengandungi CSS. Dalam React, kami mengimport grafik SVG sebagai komponen dan mereka digariskan ke HTML menggunakan Webpack.</p> <p> Jika kita membuka pen ini di Safari dan klik butang, kita masih mempunyai masalah ini. Ia masih berlaku apabila halaman dimuatkan, tetapi pada Codepen kita perlu memaksanya dengan mengklik butang. Kita boleh membuat kesimpulan bahawa CSS bukan penyebabnya, tetapi kita juga dapat melihat bahawa hanya dua daripada lima butang menghadapi masalah dalam kes ini. Mari kita ingat ini dan teruskan kepada andaian seterusnya.</p> <h3 id="Isu-pengasingan"> Isu pengasingan</h3> <p> Anggapan seterusnya kami menyatakan bahawa safari berada di html<code><div> Terdapat pepijat apabila membuat SVG di dalam elemen. Oleh kerana masalah itu berlaku pada dua butang pertama, kami akan <strong>mengasingkan butang pertama</strong> dan melihat apa yang berlaku.<p> Sarah Drasner menerangkan kepentingan pengasingan, dan jika anda ingin mengetahui lebih lanjut mengenai alat debugging dan kaedah lain, saya sangat mengesyorkan membaca artikelnya.</p> <blockquote><p> Pengasingan mungkin merupakan prinsip teras terkuat dalam semua debugging. Pangkalan kod kami boleh menjadi besar, dengan perpustakaan yang berbeza, kerangka kerja, dan mungkin mengandungi banyak penyumbang, bahkan orang yang tidak lagi terlibat dalam projek itu. Isu kuarantin membantu kita perlahan -lahan menghapuskan bahagian yang tidak perlu dari isu -isu supaya kita dapat memberi tumpuan kepada penyelesaian sahaja.</p></blockquote> <p> Ia juga sering dirujuk sebagai "kes ujian yang dipermudahkan."</p> <p> Saya memindahkan butang ini ke laluan ujian kosong yang berasingan (halaman kosong). Saya mencipta codepen berikut untuk menunjukkan status. Walaupun kita telah membuat kesimpulan bahawa CSS bukan punca masalah, kita juga harus mengecualikan pepijat sebelum mengetahui punca sebenar bug untuk mempermudahkan masalah sebanyak mungkin.</p> <p> Jika kita membuka pen ini di Safari, kita dapat melihat bahawa kita <strong>tidak dapat menghasilkan semula masalah lagi</strong> dan <strong>graf SVG memaparkan seperti yang dijangkakan selepas mengklik butang</strong> . <strong>Kita tidak sepatutnya menganggap perubahan ini sebagai pembetulan pepijat yang boleh diterima</strong> , tetapi ia memberikan titik permulaan yang baik untuk membuat contoh yang boleh dihasilkan semula.</p> <h3 id="Contoh-yang-boleh-direproduksi-minimum"> Contoh yang boleh direproduksi minimum</h3> <p> Perbezaan utama antara dua contoh pertama ialah gabungan butang. Selepas mencuba semua kombinasi yang mungkin, kita dapat menyimpulkan bahawa masalah ini hanya berlaku apabila peristiwa lukisan berlaku untuk graf SVG yang lebih besar di sebelah graf SVG yang lebih kecil pada halaman yang sama.</p> <p> Kami mencipta satu <strong>contoh yang boleh dihasilkan semula</strong> yang membolehkan kami menghasilkan semula bug tanpa unsur -unsur yang tidak perlu. Menggunakan contoh yang boleh direproduksi terkecil, kita dapat mengkaji masalah dengan lebih terperinci dan menentukan tepat bahagian kod yang menyebabkan masalah.</p> <p> Saya mencipta codepen berikut untuk menunjukkan contoh yang boleh direproduksi terkecil.</p> <p> Jika kita membuka demo ini di Safari dan klik butang, kita dapat melihat bahawa masalah itu berlaku dan membentuk andaian bahawa kedua -dua SVGs entah bagaimana bertentangan dengan satu sama lain. Sekiranya kita melapisi angka SVG kedua pada angka pertama, kita dapat melihat bahawa saiz bulatan yang dipotong pada angka SVG pertama sepadan dengan saiz tepat angka SVG yang lebih kecil.</p> <h3 id="Membahagikan-dan-merawat"> Membahagikan dan merawat</h3> <p> Kami menyempitkan masalah itu ke gabungan dua grafik SVG. Sekarang kita akan menyempitkan masalah kepada kod SVG tertentu yang menyebabkan masalah. Jika kita hanya mempunyai pemahaman asas mengenai kod SVG dan ingin menentukan masalah, kita boleh menggunakan strategi <strong>carian pokok binari</strong> dan mengamalkan pendekatan pembahagian dan penipu. Kuliah CS Cornell University menerangkan pendekatan ini:</p> <blockquote><p> Sebagai contoh, bermula dengan sekeping kod yang besar, letakkan pusat pemeriksaan di tengah -tengah kod. Jika ralat tidak berlaku pada ketika itu, ini bermakna ralat berlaku pada babak kedua; Jika tidak, ia adalah pada babak pertama.</p></blockquote> <p> Di SVG kita boleh cuba mengeluarkan dari SVG pertama<code><filter></filter> (serta<defs></defs> kerana ia kosong juga). Mari kita periksa terlebih dahulu<filter></filter> Peranan artikel ini oleh Sara Soueidan menerangkannya.

  Seperti kecerunan linear, topeng, corak dan kesan grafik lain dalam SVG, penapis mempunyai elemen khusus yang dinamakan dengan mudah:<filter></filter> elemen.

  <filter></filter> Unsur tidak pernah diberikan secara langsung; Tujuannya ialah merujuknya menggunakan atribut filter dalam SVG atau fungsi url() dalam CSS.

  Dalam SVG kami,<filter></filter> Bayang -bayang dalaman yang sedikit digunakan untuk bahagian bawah grafik SVG. Selepas kami mengeluarkannya dari graf SVG yang pertama, kami mengharapkan bayang -bayang dalaman hilang. Sekiranya masalah berterusan, kita dapat menyimpulkan bahawa terdapat masalah dengan sisa tag SVG. Sekiranya kita pergi<g filter="url(#filter0_ii)"></g> Padam ID yang tinggal, dan bayang -bayang akan dikeluarkan sepenuhnya. Apa yang berlaku?

  Mari kita lihat yang disebutkan di atas<filter></filter> Definisi sifat dan perhatikan butiran berikut:

  <filter></filter> Unsur -unsur tidak pernah diberikan secara langsung; Tujuannya adalah dirujuk , menggunakan atribut filter dalam SVG.

  (Penekanan saya)

  Oleh itu, kita dapat menyimpulkan bahawa definisi penapis graf SVG kedua digunakan untuk graf SVG pertama dan membawa kepada ralat.

  Betulkan masalah

  Kami sekarang tahu masalahnya dan<filter></filter> Sifat berkaitan. Kami juga tahu bahawa kedua -dua SVG mempunyai atribut filter kerana mereka menggunakannya untuk membuat bayang -bayang dalaman pada lingkaran. Mari bandingkan kod antara kedua -dua SVG ini dan lihat jika kita dapat menerangkan dan membetulkannya.

  Saya telah mempermudah kod untuk kedua -dua grafik SVG supaya kita dapat melihat dengan jelas apa yang sedang berlaku. Coretan kod berikut menunjukkan kod untuk SVG pertama.

  <code><svg height="46" viewbox="0 0 46 46" width="46"><g filter="url(#filter0_ii)"></g><defs><filter height="46" width="46" x="0" y="0"></filter></defs></svg></code>

  Coretan kod berikut menunjukkan kod untuk graf SVG kedua.

  <code><svg height="28" viewbox="0 0 28 28" width="28"><g filter="url(#filter0_ii)"></g><defs><filter height="28" width="28" x="0" y="0"></filter></defs></svg></code>

  Kami dapat melihat bahawa SVG yang dihasilkan menggunakan id=filter0_ii . Safari menggunakan definisi penapis yang dibaca terakhir (dalam kes ini penanda SVG kedua) dan menyebabkan SVG pertama dipotong ke saiz penapis kedua (dari 46px hingga 28px). Atribut ID harus mempunyai nilai yang unik dalam DOM. Dengan mempunyai dua atau lebih sifat ID pada halaman, penyemak imbas tidak dapat memahami rujukan yang digunakan, dan sifat penapis ditakrifkan semula dalam setiap peristiwa seri, bergantung kepada keadaan perlumbaan yang menyebabkan masalah muncul secara rawak.

  Mari cuba memberikan nilai atribut ID yang unik kepada setiap graf SVG untuk melihat apakah ini menyelesaikan masalah.

  Jika kita membuka contoh codepen di safari dan klik butang, kita dapat melihatnya dengan membuatnya dalam setiap fail graf SVG<filter></filter> Atribut memberikan ID yang unik, kami menetapkan isu ini . Jika kita menganggap hakikat bahawa kita mempunyai nilai bukan unik untuk sifat-sifat seperti ID, ini bermakna masalah ini harus wujud pada semua pelayar . Atas sebab tertentu, penyemak imbas lain (termasuk Chrome dan Firefox) nampaknya mengendalikan kes kelebihan ini tanpa sebarang pepijat, walaupun ia mungkin hanya satu kebetulan.

  Meringkaskan

  Ini adalah perjalanan yang cukup panjang! Kami pergi dari hampir mengabaikan masalah yang seolah -olah rawak untuk memahami dan memperbaikinya sepenuhnya. Debugging UI dan memahami pepijat visual boleh menjadi sukar jika punca utama masalah itu tidak jelas atau kompleks. Nasib baik, beberapa strategi debugging yang berguna dapat membantu kami.

  Pertama, kita memudahkan masalah dengan membentuk andaian , yang membantu kita menghapuskan komponen (gaya, tag, peristiwa dinamik, dan lain -lain) yang tidak berkaitan dengan masalah. Selepas itu, kami mengasingkan markup dan mendapati contoh yang boleh direproduksi terkecil, yang membolehkan kami memberi tumpuan kepada satu blok kod. Akhirnya, kami menggunakan strategi membahagikan dan menakluki untuk menentukan masalah dan menetapkannya.

  Terima kasih kerana meluangkan masa untuk membaca artikel ini. Sebelum saya pergi, saya ingin meninggalkan anda dengan strategi debugging terakhir, yang juga diliputi dalam kuliah CS Cornell.

  Ingatlah untuk berehat antara percubaan debugging, berehat dan membersihkan pemikiran anda .

  Sekiranya anda menghabiskan terlalu banyak masa untuk pepijat, pengaturcara akan merasa letih dan debug boleh menjadi bumerang. Berehat dan bersihkan pemikiran anda; Selepas berehat, cuba berfikir tentang perkara ini dari perspektif yang berbeza.

  merujuk kepada

  • Cornell University CS 312 Kuliah 26 - Teknologi Debug
  • Petua dan petua debugging
  • Kes ujian yang dipermudahkan
  • Penapis SVG 101