angularjs $log - 행 번호 표시

angularjs $log - 행 번호 표시

하지만 angularjs $log라는 됩니다.angular.js:9037행을 (js는 그렇게 하지 않습니다.할할 줄줄 ?? ???츠요시

크롬에는 블랙박스라는 기능이 있습니다.이를 사용하여 디버깅 세션 또는 개발 워크플로에서 소스를 제외/바이패스(라이브러리)할 수 있습니다.

따라서 블랙박스의 각도를 맞추면 $log 서비스의 내부가 바이패스되고 콘솔에 올바른 행 번호가 출력됩니다.

https://developer.chrome.com/devtools/docs/blackboxing

''에 접근할 수 .$log★★★★★★★★★★★★★★★★★★:

module.config(function logConfig($provide, $logProvider) {
    $provide.decorator('$log', function ($delegate) {
        var originalFns = {};

        // Store the original log functions
        angular.forEach($delegate, function (originalFunction, functionName) {
            originalFns[functionName] = originalFunction;
        });

        var functionsToDecorate = ['debug', 'warn'];

        // Apply the decorations
        angular.forEach(functionsToDecorate, function (functionName) {
            $delegate[functionName] = logDecorator(originalFns[functionName]);
        });

        return $delegate;
    });

    function logDecorator(fn) {
        return function () {

            var args = [].slice.call(arguments);

            // Insert a separator between the existing log message(s) and what we're adding.
            args.push(' - ');

            // Use (instance of Error)'s stack to get the current line.
            var stack = (new Error()).stack.split('\n').slice(1);

            // Throw away the first item because it is the `$log.fn()` function, 
            // but we want the code that called `$log.fn()`.
            stack.shift();

            // We only want the top line, thanks.
            stack = stack.slice(1, 2);

            // Put it on the args stack.
            args.push(stack);

            // Call the original function with the new args.
            fn.apply(fn, args);
        };
    }
});

포함 가능한 모듈로 하고 있습니다만, 앱 내에서 할 수 있다고 생각합니다..config()뿐만 아니라.

온라인상의 여러 소스를 조합하여 작성했습니다.보통 레퍼런스를 잘 보관하고 있습니다만, 작성시에는 레퍼런스를 보관하지 않았던 것 같아 아쉽게도 영감은 참조할 수 없습니다.누가 답장이 오면 제가 여기에 넣을게요.

주 1: 이것은 실제로 사용하는 것을 약간 제거한 버전이기 때문에logDecorator()스택 푸쉬티 매직은 제시된 대로 작동해야 합니다.

주 B: MDN에 따르면Error.prototype.stack는 비표준입니다(IE10이 필요하며 많은 모바일브라우저에서는 지원되지 않을 수 있습니다).따라서 스택 자체를 취득하기 위해 stacktracejs 등의 기능을 사용하여 이 기능을 확장하는 것을 검토해 주십시오.

저는 이 페이지에서 몇 가지 솔루션을 조합하여 JSFiddle에 간단한 데모를 구축했습니다.$log 서비스의 사용을 시연하고, $log 콜의 행 번호($log 콜의 발신원 회선 번호)를 추가하는 데코레이터로 개선했습니다.또한 Pluker에서 조금 더 포괄적인 솔루션을 만들어 $log 서비스 사용을 시연하고, 회선 번호, 발신자 파일 이름 및 인스턴스 이름을 추가하는 데코레이터로 개선했습니다.이것이 다른 사람들에게 유용하기를 바랍니다.

JSFiddle URL - https://jsfiddle.net/abhatia/6qnz0frh/

이 바이올린은 다음 브라우저에서 테스트되었습니다.

• IE 11 - (JSFIDdle Javascript의 첫 번째 줄 번호는 72입니다.)
• Firefox 46.0.1 - (JSFIDdle Javascript의 첫 번째 줄 번호는 72입니다.)
• Chrome 50.0.2661.94 m - (JSFIDdle Javscript의 첫 번째 줄 번호는 71입니다.)

결과는 좋다.단, 위와 같이 JSFiddle의 javascript의 코드 1행 번호가 FF/IE와 Chrome의 코드 1행 번호가 다르기 때문에 Chrome의 라인 번호는 FF나 IE에 비해 1개씩 어긋나므로 주의하시기 바랍니다.

플런커 URL - https://embed.plnkr.co/YcfJ7V/

이 plunk는 개념을 매우 잘 보여주고 자세한 설명과 함께 콘솔 출력을 Angular의 디폴트 $log 서비스의 공식 예시와 함께 제공하여 두 가지를 대조할 수 있도록 합니다.Plunk는 위의 브라우저에서도 테스트되고 있습니다.

다음 스크린샷은 위의 Plunk 예에서 콘솔 출력을 보여 줍니다.다음 3가지 영역이 강조 표시됩니다.

• 빨간색 상자는 기본 $log 서비스를 사용한 콘솔 출력을 보여줍니다.$log 함수는 컨트롤러에서 호출됩니다.
• 파란색 상자는 확장 $log 서비스를 사용한 콘솔 출력을 보여줍니다.$log 함수는 컨트롤러에서 호출됩니다.스크립트명과 행번호가 어떻게 표시되는지, 컨트롤러명($log 인스턴스화 시 사용)을 확인할 수 있습니다.
• 주황색 상자는 기본값 및 확장 $log 서비스의 콘솔 출력과 대조됩니다.

이것은 Plunk 코드를 확인하면 매우 명확해집니다.

다음으로 JSFiddle에서 사용되는 getLineNumber 함수를 나타냅니다(약간 확장된 버전은 발신자 파일명을 반환하기 위해 Plunker 예를 사용합니다).

function getLineNumber(newErr, sliceIndex1, sliceIndex2)
{
  var lineNumber = -1;
  var lineLocation;

  var stack = newErr.stack.split('\n').slice(2);
  if (navigator.userAgent.indexOf("Chrome") > -1) {
    stack.shift();
  }
  stack = stack.slice(sliceIndex1, sliceIndex2);
  var stackInString = stack + '';
  var splitStack;
  if (navigator.userAgent.indexOf("Chrome") > -1) {
    splitStack = stackInString.split(" ");
  }
  else {
    splitStack = stackInString.split("@");
  }
  lineLocation = splitStack[splitStack.length - 1]; 
  //console.log(lineLocation);
  lineNumber = lineLocation.split(":")[2];
  return lineNumber; 
}

회선번호는 런타임에서 가져옵니다.일반적인 경우는 설정할 수 없습니다.

을 사용하다회선 번호가 정말로 중요한 장소에서는, 다른 콜을 사용할 수 있습니다. " " " 를 하십시오.$window후 : 후후 :

$window.console.log("test1");

포맷, 브라우저 간 필러 코드 등 몇 가지 작업을 생략할 수 있지만 실행 시 고유 코드 없이 무료로 올바른 회선 번호를 얻을 수 있습니다.

플로팅 로마스의 답변에 가깝다

module.config(function($logProvider, $provide){ 
    $provide.decorator('$log', function ($delegate) {
        $delegate.info = function () {
            var args = [].slice.call(arguments);
            if (window.console && window.console.table)
                console.trace(args[0], args[1]);
            else
                $delegate.log(null, args)
        };
        return $delegate;
    });
})

보통 두 번째 @ 행이 필요합니다(이 경우 90618).

FF에서는 잘 동작하지 않기 때문에 floatingLomas 솔루션을 몇 가지 수정하여 사용하고 있습니다만, 스택이 조금 다릅니다.또한 IE와 같은 phantomj는 Error.stack을 지원하지 않으며 중단됩니다.로그 위치는 크롬으로 클릭할 수 있지만 ff로는 클릭할 수 없습니다.

app.config(function logConfig($provide, $logProvider) {
    $provide.decorator('$log', function ($delegate) {
        var originalFns = {};

        // Store the original log functions
        angular.forEach($delegate, function (originalFunction, functionName) {
            originalFns[functionName] = originalFunction;
        });

        var functionsToDecorate = ['debug', 'warn'];

        // Apply the decorations
        angular.forEach(functionsToDecorate, function (functionName) {
            $delegate[functionName] = logDecorator(originalFns[functionName]);
        });

        return $delegate;
    });

function logDecorator(fn) {
    return function () {

        var args = [].slice.call(arguments);

        // Insert a separator between the existing log message(s) and what we're adding.
        args.push(' - ');

        // Use (instance of Error)'s stack to get the current line.
        var newErr = new Error();

        // phantomjs does not support Error.stack and falls over so we will skip it
        if (typeof newErr.stack !== 'undefined') {
            var stack = newErr.stack.split('\n').slice(1);

            if (navigator.userAgent.indexOf("Chrome") > -1) {
                stack.shift();
            }
            stack = stack.slice(0, 1);

            var stackInString = stack + '';
            var splitStack;
            if (navigator.userAgent.indexOf("Chrome") > -1) {
                splitStack = stackInString.split(" ");
            } else {
                splitStack = stackInString.split("@");
            }
            var lineLocation = splitStack[splitStack.length - 1];
            // Put it on the args stack.
            args.push(lineLocation);

            // Call the original function with the new args.
            fn.apply(fn, args);
        }
    };
}

크롬 버전 65.0.3325.181을 사용하고 있습니다.

저 같은 경우에는

1. 메뉴로 이동, 설정 -> Blackboxing
2. 블랙박스 콘텐츠 스크립트 확인
3. 블록박스 패턴 angular.model을 추가합니다.

언급URL : https://stackoverflow.com/questions/20738707/angularjs-log-show-line-number