Blockly ve blockly-samples ile hata ayıklama

Bazen blok halinde örneklerde bir eklenti geliştirirken, ilgili değişiklikleri Blockly'nin kendisinde yapmanız gerekir. Çoğu eklenti, npm kayıt defterinden Blockly'yi almak üzere ayarlanır. Bu nedenle, yalnızca npm'de yayınlanmış olan kodu kullanabilirsiniz. Bu durum, engellemeli değişikliklerinizde hata ayıklamayı zorlaştırır. Hem blok halinde hem de blok halinde değişiklikler yapmak ve test etmek istediğinizde, yayınlanmamış değişikliklerinizi birlikte kullanmak için aşağıdaki yöntemlerden birini kullanabilirsiniz.

npm'ye, paketi npm kayıt defterinden getirmek yerine makinenizdeki bir paketi kullanmasını söyleyebilirsiniz. Bu yöntemi kullanarak, hata ayıklamayı blockly_com markasını daha kolaylaştıran kaynak haritalarına erişebilirsiniz. Bu yöntemi, çekirdekte bulunan ve henüz GitHub'a aktarılmayan değişikliklerle kullanabilirsiniz.

  1. Blok şeklindeki çatalınızda:

    $ npm run package
$ cd dist
$ npm link

    Aşağıdaki adımlar temel Blockly'yi derlemek, paketlemek ve ardından paketlenmiş dosyalara bir sembolik bağlantı oluşturmaktır.

  2. Blok örneklerden oluşan çatalınızda:

    $ npm link blockly

    Bu adım npm'ye paketi npm'den getirmek yerine daha önce oluşturduğunuz sembolik bağlantıyı aramasını bildirir.

  3. Eklentinizi test etmek için npm run start.

Çekirdekte değişiklik yaptığınızda onu yeniden oluşturmanız ve yeniden paketlemeniz gerekir.

2. Yöntem: GitHub'dan getirme

npm'ye npm kayıt defterinden değil GitHub'dan paket getirmesini söyleyebilirsiniz. Bu yöntemi kullanarak, blockly_compressed hatalarında hata ayıklamayı daha kolay hale getiren kaynak haritalarına erişebilmeniz gerekir. Daha önce GitHub'da bir yerde yayınlanmış olan blockly sürümünü kullanmanız gerekir.

  1. Eklentinizin package.json içindeki scripts bölümünün aşağıdakileri içerdiğinden emin olun:

    "postinstall": "blockly-scripts postinstall"

    Bu komut dosyası, sonraki bir adımda GitHub'dan yüklendikten sonra Blockly'yi otomatik olarak derler.

  2. package.json içinde engellemeli sürüm için bir sürüm numarası sağlamak yerine bir git adresi ve dal adı sağlayın:

    "blockly": "git://github.com/google/blockly.git#develop"

    Bu, birleştirilen değişiklikleriniz varsa kendi blok çatalınızın bağlantısı da olabilir.

  3. Her zamanki gibi npm install

  4. Eklentinizi test etmek için npm run start

Core Blockly'de değişiklik yaptığınızda, bu değişiklikleri belirtilen şubedeki GitHub'a aktarmanız gerekir. Ayrıca, npm'nin GitHub'dan yeni bir sürüm getirmesini istediğinizde npm uninstall blockly (veya başka bir şekilde node_modules cihazınızdan kaldırmanız) ve daha sonra yukarıda açıklandığı gibi yeniden yüklemeniz gerekir.

3. Yöntem: Gelişmiş Oyun Alanı

Eklentinizdeki hataları ayıklamak için gelişmiş oyun alanını (temel Blockly'de) kullanabilirsiniz. Bu yöntemi kullanarak kaynak haritalarına güvenmeyeceğiniz için hata ayıklaması daha kolay olabilecek blockly_uncompressed yöntemini kullanırsınız. Kaynak haritalarıyla hata ayıklamada sorun yaşıyorsanız veya gelişmiş oyun alanının özelliklerini kullanarak eklentinizi test etmek istiyorsanız bu yöntemi kullanın.

  1. Blok örneklerdeki eklenti dizininizde:

    $ npm run build
$ cd dist
$ pwd

    Bu işlem, eklentinizi derler ve paketler. Daha sonra, eklentiniz için dist dizininin tam dizin yolunu yazdırır. Bu yolu kopyalayın. Sonraki adımda buna ihtiyacımız olacak.

  2. Blok halinde, advanced_playground.html içinde:

    <script src="$PATH_TO_DIST_DIR/index.js">

    Ardından, eklentiniz için gerekli ayarları yapmanız gerekir. Örneğin, seçenekler nesnesinde belirli değerleri belirtmeniz gerekebilir. Bu kurulumu mevcut çalışma alanı kurulumunda yapın.

  3. Eklentinizi test etmek için tarayıcıda gelişmiş oyun alanını açın.

Blok düzeyde değişiklik yaptığınızda yalnızca yenilemeniz gerekir. Eklentinizde değişiklik yaptığınızda npm run build uygulamasını yeniden çalıştırmanız gerekir.