API'leri dayanmasına rağmen onlar Firefox 55. bulunmayan bu sayfa devtools API'leri açıklamaktadır Krom devtools API'ler , henüz Firefox'ta uygulanmadı ve bu nedenle burada belgelere alınmamıştır hala pek çok özellik vardır. Özellikleri şu anda bakın eksik olduğunu görmek için devtools API'larından Sınırlamaları .
Sen tarayıcının yerleşik geliştirici araçlarını genişletmek için WebExtensions API'leri kullanabilirsiniz. Bir devtools uzantısı oluşturmak için, "include devtools_page içinde" tuşuna manifest.json :
"Devtools_page": "devtools / devtools-sayfa.html"
Bu anahtarın değeri sizin uzantısı ile birlikte olmuş bir HTML dosyasına işaret eden bir URL'dir. URL Manifest.json dosyasının kendisini göreli olmalıdır.
HTML dosyası devtools sayfası olarak adlandırılır, uzantısında özel bir sayfa tanımlar.
devtools sayfa tarayıcı devtools açıldığında yüklenen ve kapatıldığında kaldırılır. dolayısıyla birden fazla devtools sayfa - - devtools pencere tek bir sekme ile ilişkili olduğu için, birden fazla devtools pencere için oldukça mümkün olduğunu Not aynı anda var olması.
Devtools sayfa görünür bir DOM yok, ama kullanan JavaScript kaynaklarını içerebilir <script>etiketleri. Kaynaklar uzantısı kendisi ile birlikte alınmalıdır. Kaynaklar erişebilirsiniz:
windownesneNot devtools sayfasının başka WebExtension API'leri erişmek etmediğini ve arka plan sayfası devtools API'ler erişim elde etmez. Bunun yerine, devtools sayfa ve arka plan sayfasını kullanarak iletişim kurmalıdır runtimemesajlaşma API'leri. İşte bir örnek:
<! DOCTYPE html> <Html> <Head> <Meta karakter seti = "UTF-8"> </ Head> <Body> </ Script> <script src = "devtools.js"> </ Body> </ Html>
devtools.js dosyası dev araçları uzantıları yaratarak gerçek kod düzenleyecek.
devtools pencere barındıran ayrı bir dizi araç - JavaScript Debugger, Ağ İzleyicisi, vb. üst kısmında sekmeler Bir sıra farklı araçlar arasındaki kullanıcı anahtarı sağlar. Her aracın kullanıcı arayüzü barındırmak penceresi "paneli" olarak adlandırılır.
Kullanımı devtools.panels.create()API, sen devtools penceresinde kendi paneli oluşturabilir:
browser.devtools.panels.create (
"Benim Paneli", // başlık
"Simgeleri / star.png", // simgesi
"Devtools / paneli / panel.html" // içerik
) .Ve ((newPanel) => {
newPanel.onShown.addListener (initialisePanel);
newPanel.onHidden.addListener (unInitialisePanel);
});
Panelin başlığı, simge ve içerik: Bu üç zorunlu argüman alır. Bir döner Promisebir çözer ki devtools.panels.ExtensionPanelyeni bir panel ifade eden nesne.
Geliştirici araçları her zaman belirli bir tarayıcı sekmesine eklenir. Bu geliştirici araçları için "hedef" veya "teftiş pencere" olarak adlandırılır. Sen kullanarak denetlenmiş pencere ile etkileşime girebilir devtools.inspectedWindowAPI.
devtools.inspectedWindow.eval()Teftiş pencerede kod çalıştırmasına bir yol sağlar.
Bu biraz kullanmak gibidir {{WebExtAPIRef ( "tabs.executeScript ()")}} bir içerik komut enjekte ancak bunlarla önemli bir farkla:
devtools.inspectedWindow.eval()yok olsun bir "DOM temiz görünümü" olduğunu, bunlar sayfa komut dosyaları tarafından yapılan sayfaya değişiklikleri görebilirsiniz.DOM temiz bir görünüm yardım amaçlanan, bir güvenlik özelliğidir geldiğini hatırlatırız yerli DOM işlevleri davranışını yeniden tanımlanarak uzantıları kandırma gelen düşman sayfaları engeller. Bu araçlar siz) eval (kullanarak çok dikkatli olmak gerekiyor ve eğer yapabilirsen normal içerik komut dosyası kullanmalısınız.
Komut dosyaları kullanılarak yüklenen devtools.inspectedWindow.eval()içerik komut ile tanımlanan herhangi JavaScript değişkenleri görmüyorum de.
Bir devtools belge doğrudan erişimi yok {{WebExtAPIRef ( "tabs.executeScript ()")}} Bir içerik komut dosyası enjekte etmek gerekirse, bu nedenle, devtools belge arka plan komut bir mesaj göndermesi gerekir inject bunu soran senaryo. devtools.inspectedWindow.tabIdHedef sekmesinin kimliğini sağlar: devtools belge arka plan komut dosyasına bu geçebilir ve arka plan komut sırayla içine geçebilir {{WebExtAPIRef ( "tabs.executeScript ()")}}:
// devtools-panel.js
const scriptToAttach = "document.body.innerHTML = 'DevTools'un Hi';";
window.addEventListener () ( "click" => {
browser.runtime.sendMessage ({
Tabla: browser.devtools.inspectedWindow.tabId,
komut: scriptToAttach
});
});
// background.js
işlev handleMessage (istek, gönderen, sendResponse) {
browser.tabs.executeScript (request.tabId {
kod: request.script
});
}
browser.runtime.onMessage.addListener (handleMessage);
Hedef penceresinde çalışan içerik komut ve devtools belgeye arasındaki değişim mesajlarına gerekiyorsa, {{WebExtAPIRef ( "runtime.connect ()")}} ve {{WebExtAPIRef ( "runtime.onConnect kullanmak iyi bir fikirdir ")}} arkaplan sayfası ile devtools belgeye arasında bağlantı kurmak için. arka plan sayfası ardından sekme kimlikleri ve {{WebExtAPIRef ( "runtime.Port")}} nesneler arasında bir eşleme korumak ve iki kapsamları arasındaki iletileri yönlendirmek için kullanabilir.
Chrome dayanmaktadır Bu API'ler API'leri DevTools'un, ancak birçok özellik hala Chrome ile karşılaştırıldığında, eksik. Bu bölümde yine devtools API'leri etkin geliştirme aşamasındadır ve gelecekteki yayınlara çoğu desteği eklemek beklediklerini Firefox 54. Not itibariyle uygulanmadı özellikleri.
Aşağıdaki desteklenmez:
inspectedWindow.getResources()inspectedWindow.onResourceAddedinspectedWindow.onResourceContentCommittedSeçeneklerden hiçbiri için inspectedWindow.eval()desteklenir.
Komut dosyaları kullanılarak enjekte inspectedWindow.eval()tüm Konsolunun komut satırı yardımcı işlevlerini kullanamazsınız, ancak $0ve inspect(...)her ikisi (Firefox 55 başlayarak) desteklenir.
Aşağıdaki desteklenmez:
panels.elementspanels.sourcespanels.setOpenResourceHandler()panels.openResource()panels.ExtensionPanel.createStatusBarButton()panels.Buttonpanels.ElementsPanelpanels.SourcesPanelWebextensions-örnekler GitHub'dan Repo, devtools panelleri kullanmak uzantıları bazı örnekler sunulmaktadır:
devtools paneller devtools panelleri kullanımı: