Öğeyi Dışa Aktar, bir web sayfasındaki herhangi bir öğeye tıklayarak üç formatta tam yapısını dışa aktarmanıza olanak tanır: tüm alt öğeler ve özniteliklerle ham HTML biçimlendirmesi, temiz bir stil sayfası olarak hesaplanmış CSS stilleri veya yapılandırılmış bir JSON temsili. Tasarım kalıpları çıkarmak, kod parçacıkları kaydetmek ve UI bileşenlerini belgelemek için mükemmel araç.
Her geliştiricinin mevcut bir sayfadan kod çıkarması gereken anları olur — belki güzel biçimlendirilmiş bir kart bileşeni, iyi yapılandırılmış bir navigasyon çubuğu veya kopyalamak istediğiniz bir form düzenidir. Normalde bu, sağ tıklama, "Öğeyi İncele", Öğeler panelinden HTML'i manuel olarak kopyalama, ardından Stiller panelinden CSS'i ayrı olarak çıkarma anlamına gelir. Öğeyi Dışa Aktar bunu tek bir tıkta birleştirir. Herhangi bir öğeyi seçin ve tam HTML'ini, tam hesaplanmış CSS'ini veya yapılandırılmış bir JSON temsilini alın — her biri kendi sekmesinde, biçimlendirilmiş ve kullanıma hazır. HTML dışa aktarımı öğeyi ve tüm alt öğelerini uygun girintilendirmeyle içerir. CSS dışa aktarımı her hesaplanmış stili gösterir (sadece yazılmış stilleri değil), böylece tarayıcının oluşturduğu tam görünümü elde edersiniz. JSON dışa aktarımı belgeleme, test veya programatik analiz için yararlı yapılandırılmış bir veri temsili sağlar.
<div class="pricing-card">
<div class="card-header">
<img src="icon.svg"/>
<h3>Pricing Card</h3>
</div>
<p>$29.99/month</p>
<button>Subscribe</button>
</div>
Tüm alt öğeler, öznitelikler ve iç içe yapı dahil olmak üzere seçilen öğenin tam HTML biçimlendirmesini alın. Çıktı düzgün girintilendirilmiş ve biçimlendirilmiştir — outerHTML'den aldığınız tek satırlık karmaşa değil. Yeni bir HTML dosyasına veya bileşen şablonuna yapıştırmaya hazır.
Öğe için her hesaplanmış CSS özelliğini temiz, biçimlendirilmiş bir stil sayfası olarak çıkarın. Tipografi, renkler, boşluk, kenarlıklar, düzen ve konumlandırmayı içerir. CSS, tarayıcının gerçekten oluşturduğu şeydir — miras alma, özgüllük ve kaskadı hesaba katar.
Öğenin etiket adını, öznitelik eşlemesini, hesaplanmış stillerini, iç metin içeriğini ve özyinelemeli bir alt öğe dizisini içeren bir JSON nesnesi alın. Programatik analiz, belgeleme, test fikstürleri veya özel araçlar oluşturmak için kullanışlıdır.
HTML, CSS ve JSON sekmeleri arasında anında geçiş yapın. Her format aynı seçili öğeden oluşturulur, böylece ihtiyacınız olan temsili alabilirsiniz. Üçü de her zaman öğeyi yeniden seçmeden kullanılabilir.
Her dışa aktarma formatı önizleme panelinde sözdizimi vurgulamasıyla görüntülenir. HTML etiketleri kırmızı, öznitelikler sarı, değerler yeşil. CSS özellikleri mor, değerler yeşil. JSON anahtarları ve değerleri renk kodludur. Kopyalamadan önce okunması kolaydır.
Mevcut sekmenin içeriğini almak için Kopyala düğmesine tıklayın. Durum çubuğu dışa aktarımın satır sayısını ve bayt boyutunu gösterir, böylece ne kadar içerik kopyaladığınızı bilirsiniz. Onay geri bildirimi kopyalamanın başarılı olduğunu gösterir.
Kopyalamak istediğiniz bir kart, kahraman bölümü veya navigasyon çubuğu mu buldunuz? Üzerine tıklayın, yapı için HTML'i dışa aktarın, ardından biçimlendirme için CSS'i dışa aktarın. Kendi bileşeniniz için tam bir başlangıç noktanız var.
Belgeleme veya tasarım sistemi kayıtları için öğeleri JSON olarak dışa aktarın. Yapılandırılmış temsil etiket adlarını, öznitelikleri ve stilleri içerir — bileşen envanteri tutmak veya belgeleme araçlarına beslemek için mükemmeldir.
Birim testleri için HTML fikstürlerine mi ihtiyacınız var? Öğenin HTML'ini dışa aktarın ve test dosyanıza yapıştırın. Çıktı temiz ve biçimlendirilmiştir, bileşen testi için bir DOM anlık görüntüsü olarak kullanıma hazırdır.
CSS dışa aktarımı hesaplanmış stilleri gösterir — tüm CSS kuralları uygulandıktan sonra tarayıcının gerçekten oluşturduğu şey. Özgüllük çakışmalarını, miras alma geçersiz kılmalarını veya beklenmeyen varsayılan değerleri bulmak için hesaplanmış çıktıyı yazdığınız CSS ile karşılaştırın.
Üretim sitelerindeki zarif uygulamaları kişisel bir parçacık kütüphanesine kopyalayın. Tam bileşeni — yapı ve biçimlendirme — gelecekteki referans için korumak için HTML ve CSS'i birlikte dışa aktarın.
DevSuite Pro yüzen yuvasını açın ve Öğeyi Dışa Aktar simgesine tıklayın. İmleç bir artı seçiciye dönüşür ve sekmeli bir dışa aktarma paneli açılır.
Sayfadaki herhangi bir öğeye tıklayın. Mor bir kenarlıkla vurgulanır ve dışa aktarma paneli üç sekmede öğenin HTML, CSS ve JSON temsilleriyle dolar.
Öğeyi farklı formatlarda görüntülemek için HTML, CSS veya JSON sekmesine tıklayın. Her sekme dışa aktarma içeriğinin sözdizimi vurgulu, biçimlendirilmiş bir önizlemesini gösterir.
İhtiyacınız olanı içerdiğinden emin olmak için önizlemeyi tarayın. Mevcut sekmenin içeriğini panonuza koymak için "Kopyala" düğmesine tıklayın. Durum çubuğu satır sayısını ve boyutu gösterir.
Dışa aktarma panelini yeni içerikle güncellemek için sayfadaki farklı bir öğeye tıklayın. Devre dışı bırakmaya gerek yok — birden fazla öğeyi dışa aktarmak için tıklamaya devam edin.
DevSuite Pro'yu ücretsiz yükleyin ve tarayıcınız için 39'dan fazla geliştirici aracının kilidini açın.