[초보자용] Chrome Developer Tools의 Console에서 JavaScript 실행

Chrome Developer Tools의 Consiols 패널에서 JavaScriptvar와 function의 정의가 undifined인 것을 실행할 수 있기 때문에 나는 정의하지 못한 줄 알았는데 사실은 그렇지 않았다.

연습하다

function add(a, b=20) {
  return a + b;
}
// undifined と返ってくる

add(25);
// 45

검색 창의 형식 값을 변경해 보십시오

더욱 실천에 가까운 연습을 위해 검색 형식의 값을 바꾸는 코드를 쓰고 싶을 때 콘스토어를 사용해 확인하면서 개발하는 상황을 구상한다.
먼저 결론적으로 다음과 같은 코드로 고칠 수 있다.

var parent = document.getElementsByClassName('search-form');
// undefined
parent[0].getElementsByClassName('search-field')[0].value = 'bbb';
// "bbb"

다만, 위 코드에 도달하기 전에 Constore에서 다음을 시도합니다.

실행 코드를 줄줄이 보다.

var parent = document.getElementsByClassName('search-form');
// undefined ← これは今まで未定義だったという意味っぽい

parent
// HTMLCollection [form.search-form] ←ちゃんと変数に値が入っている
// 0: form.search-formlength: 
// 1__proto__: HTMLCollection

parent.children
// undefined ← よくみるとparentはCollectionなのでundefinedとなる

parent[0].children
// HTMLCollection(2) [label.screen-reader-text, input.search-field, s: input.search-field]

parent[0].getElementsByClassName('search-field');
// HTMLCollection [input.search-field, s: input.search-field]

parent[0].getElementsByClassName('search-field')[0].value = 'bbb';
// "bbb"

이 내보낸 코드로 책 파일에 기술하십시오.평소 크롬의 콘스토어를 통해 조작하지 않기 때문에 더 좋은 시도법과 디버깅 방법이 있다면 알려주세요.

가장 좋은 것은 정식 문서에서 열심히 공부하는 것이다

Chrome Devotols로 JavaScript 디버그
https://developers.google.com/web/tools/chrome-devtools/javascript?hl=ja
Console 사용
https://developers.google.com/web/tools/chrome-devtools/console/javascript?hl=ja

참고 자료

jQuery 제거
https://wemo.tech/2101