Chrome에서 AngularJS 디버그

Rana Hasnain Khan 2024년2월15일

Angular Angular Debug

Chrome에서 AngularJS 디버그
결론

Chrome에서 AngularJS를 디버그하는 방법을 소개합니다.

Chrome에서 AngularJS 디버그

AngularJS의 구조로 작업한다고 가정하고 AngularJS 구조에 체크박스가 있는 상황을 살펴보았습니다. 양식을 제시하기 전에 클라이언트가 확인란 중 하나를 선택(또는 제한)했다고 가정하고 확인해야 합니다.

여기에서 AngularJS $scope에서 확인란이 선택되거나 제한되지 않았는지 확인하는 이상적인 방법을 알려드리겠습니다.

# AngularJS

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
</head>
<body>
    <div ng-app="angApp" ng-controller="angController">
        <div>
            <input type="text" ng-model="myname" id="myname" />
        </div>
    </div>
</body>
<script>
    var angApp = angular.module('angApp', []);
    angApp.controller('angController',
        ['$scope', function () {
        } ]
    );
</script>
</html>

출력:

크롬 예제에서 angularjs 디버그

프로그램 제어 센터에서 구성 요소의 $scope 입구에서 콘솔 창에서 이 코드를 작성해야 합니다.

# AngularJS
angular.element($0).scope();

응용 프로그램을 실행할 수 있으며 해당 브라우저에서 F12를 눌러 해당 브라우저 창으로 이동합니다. 가장 먼저 할 수 있는 일은 요소 탭을 열고 디버그할 구성 요소를 선택하는 것입니다.

위의 예에서 우리가 가지고 있는 유일한 요소를 볼 수 있습니다. 따라서 입력 요소를 클릭하면 창에서 아래 스크립트를 작성하여 입력할 수 있습니다.

# AngularJS
angular.element($0).scope();

요소 탭에서 구성 요소를 선택하여 $0에 구성 요소의 데이터 또는 참조를 삭제합니다. 변수입니다.

$scope 요소에 액세스하기 전에 요소를 클릭하여 요소를 선택해야 한다는 것을 기억해야 합니다.

콘솔 IntelliSense를 사용하여 프로그램이 제공하는 다양한 기술과 속성을 확인하면 앱을 더 자세히 살펴보는 데 도움이 됩니다.

AngularJS의 `querySelector()` 메서드

그러나 $0 변수를 사용하는 대신 이를 수행하는 방법이 하나 더 있습니다. .querySelector() 메소드 문서를 활용할 수 있습니다.

# AngularJS
document.querySelector("input"); angular.element(document.querySelector("input")).scope();

AngularJS에 할당된 값

이제 콘솔에서 입력 상자 요소 내부의 값을 할당하고 수정합니다. 예를 들어 해당 상자에 이름을 표시하고 싶습니다.

# AngularJS
angular.element($0).scope().name = 'Subhan';

실제로 그 능력으로는 아무 일도 일어나지 않았습니다. 입력 상자는 아직 비어 있습니다.

실제 콘솔에서 이름으로 표시된 대로 모든 작업이 수행됩니다. Chrome에서 값이 빨간색임을 나타냅니다.

그러나 정보 상자에 해당 값이 필요합니다. 브라우저 창의 실제 변경 사항을 반영하기 위해 $apply() 메소드를 $scope에 추가해야 합니다.

# AngularJS
angular.element($0).scope().$apply();

Enter 키를 눌러 브라우저의 입력 상자에 Subhan 값 상자를 표시해야 합니다. 텍스트 또는 입력 상자에 입력한 값을 확인하기 위한 유효성 검사에 버튼과 같은 다른 컨트롤을 앱에 추가할 수도 있습니다.

결론

위에서 논의한 바와 같이 지식의 양이 적습니다. JS 콘솔에서 브라우저를 사용하여 더 많은 작업을 수행할 수 있으며 이는 AngularJS 앱을 테스트하고 검사하는 데 도움이 됩니다.

요소, 속성 및 데이터에 액세스하여 $scope 변수에 액세스하고 변수에 값을 할당할 수 있습니다.

작가: Rana Hasnain Khan

Rana is a computer science graduate passionate about helping people to build and diagnose scalable web application problems and problems developers face across the full-stack.

Chrome에서 AngularJS 디버그

AngularJS의 querySelector() 메서드

AngularJS에 할당된 값

결론

AngularJS의 `querySelector()` 메서드