Django 자바 스크립트 및 디버깅

Question

내 템플릿에서 jquery를 사용하여 JS datepicker를 추가하려고하지만 실제로 정상적으로 작동하지 않습니다.

내 HEADER.html 현재 (마스터 템플릿) :

[...] 
    <script src="{% static 'js/jquery.js' %}"></script> 
    <script src="{% static 'js/jquery-ui.js' %}"></script> 
    <script> 
     $(function() { 
      $("#datepicker").datepicker({ 
       showOn: "button", 
       buttonImage: "{% static 'images/calendar.gif' %}", 
       buttonImageOnly: true, 
       buttonText: "Select date" 
      }); 
     }); 
    </script> 
    <title>{% block title %}{% endblock %}</title> 
</head> 

스크립트가 포함 된 템플릿 : 나는 완전히 벌거 벗은 시트를 만들고 스크립트를 사용하는 경우는 찾아 작동

[...] 
    <div class="form-group"> 
     <div class="col-sm-offset-2 col-sm-10"> 
      <span class="text-danger small">{{ field.errors }}</span> 
     </div> 
     <label class="control-label col-sm-2"> 
      {{ field.label_tag }} 
     </label> 
     <div class="col-sm-10"> 
      <input type="text" id="datepicker"> 
     </div> 
    </div> 
[...] 

. 모든 코드를 main header.html 템플릿에 넣으면 작동하지 않습니다. 내 header.html을 완전히 지우고 모든 코드를 스크립트 소스로 바꾸면 작동합니다. 내 코드가 스크립트가 작동하지 않게하는 방법을 알지 못합니다. 내가 여기서 무엇을 놓치고 있니? 또한 개발 서버가 원격 일 때 문제를 해결하는 좋은 방법은 무엇입니까?

Answer 1

디버깅 HTML : 파이어 폭스에

열기 페이지 (다른 브라우저)와 소스보기 (리눅스 또는 윈도우 맥, 명령 U에 CTRL-U). Firefox는 소스를 볼 때 HTML의 오류를 강조 표시합니다.

오류를 보려면 파이어 폭스를 사용하고 "소스보기"옵션을 통해 소스를 살펴 봐야합니다. 브라우저가 HTML 소스 코드가 아닌 실제 DOM을 보여주기 때문에 브라우저 콘솔/관리자를 사용하지 마십시오. .

html tidy를 설치하면 페이지 소스를 저장하고 tidy my-file.html을 실행하여 구문 오류를 검사 할 수 있습니다. 그것은이 같은 오류를 표시합니다 : 디버깅