Jak utworzyć element w Narzędziach deweloperskich Chrome?

Question

Chciałbym dodać nowy element do strony narzędzi Chrome w wersji deweloperskiej. Wydaje się to dość oczywistą funkcjonalnością, ale nie mogę tego znaleźć.

Czy Chrome pozwala mi tworzyć elementy na karcie DOM? Zdaję sobie sprawę, że mogę coś zrobić z konsoli JS, ale wolę coś na karcie DOM.

Answer 1

Wystarczy kliknąć prawym przyciskiem myszy na elemencie macierzystym, zmień na „Edytuj jako HTML”, a następnie dodać elementy cokolwiek chcesz ...

Answer 2

Zgodnie z docs klawisz F2 powinny włączyć wybrany element i wyjść z edycji tryb, aby można było dodać element wewnątrz.

Niestety, używam Chromebooka bez klawisza F2.

Answer 3

Albo możesz po prostu odpalić konsolę i dołączyć element. Na przykład, gdybym miał zrobić to poniżej na tej konkretnej stackoverflow.com postu:

$('.postcell').append('<code>Testing Element Insertion via Chrome</code>'); 

ja bym wtedy zobaczyć nowo dołączany element, od razu widoczne w zakładce elementy:

Answer 4

wciśniętym klawiszem Control w panelu Elements i wybierając Edit as HTML jest prawdopodobnie najlepszym sposobem, aby przejść, ale można też w konsoli (z ciekawości i bez konieczności jQuery):

var child = document.createElement('div'); 
var parent = document.getElementByClassName('parent'); 
parent.appendChild(child); 

Cheers!