Chrome에서 console.log를 파일로 저장


173

누구나 Chrome의 console.log 출력을 파일에 저장하는 방법을 알고 있습니까? 또는 콘솔에서 텍스트를 복사하는 방법은 무엇입니까?

몇 시간 동안 기능 테스트를 실행 중이고 Chrome에 수천 줄의 console.log 출력이 있다고 가정 해보십시오. 저장하거나 내보내는 방법은 무엇입니까?


답변:


98

나는 똑같은 일을해야했고 이것이 내가 찾은 해결책입니다.

  1. 플래그를 사용하여 명령 행에서 로깅 을 사용 가능하게하십시오 .

    --enable-logging --v=1

    이것은 Chrome이 내부적으로하는 모든 것을 기록하지만 모든 console.log()메시지 도 기록합니다 . 로그 파일이 호출 chrome_debug.log되고에 있습니다 User Data Directory.

  2. 줄에 대해 얻은 로그 파일을 필터링하십시오 CONSOLE(\d+).

콘솔 로그는로 표시되지 않습니다 --incognito.


3
내 맥 OS에서 작동하지 않는 것 같습니다 내부 로그는 있지만 Console.log는 없습니다 ...
Nico

7
console.log 정보는 로그 파일에 저장되지 않습니다. Windows 8의 경우
coderama

4
맥에 나는 ~ / 라이브러리 / 응용 프로그램 지원 / 구글 / 크롬 / chrome_debug.log에서 로그 파일을 찾을
vaichidrewar

2
이것은 /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --enable-logging --v=1로그에 저장된 OSX 10.10.3에서 여전히 작동합니다.~/Library/Application Support/Google/Chrome/chrome_debug.log
mateuscb

3
내부 크롬 로그 이외의 것을 얻지 못했습니다. 내 console.log()줄은 그 파일 어디에도 없습니다. 누구든지 이것에 대한 수정이 있습니까?
xandermonkey

187

좋은 소식

Chrome 개발 도구를 사용하면 콘솔 출력을 파일에 기본적으로 저장할 수 있습니다

  1. 콘솔을 엽니 다
  2. 마우스 오른쪽 버튼으로 클릭
  3. "다른 이름으로 저장"을 선택하십시오.

콘솔을 파일로 저장

Chrome 개발자 지침은 여기에 있습니다 .


3
키보드 단축키를 사용하거나 콘솔에서 명령을 실행할 수 있습니까?
Sarthak Singhal

1
다음은 모든 devTools 바로 가기 developer.chrome.com/devtools/docs/shortcuts
adardesign

11
이것은 스택 추적을 복사하지 않는 것 같습니다
Michael

2
콘솔에서 해당 파일을 다시 열 수 있습니까? 그렇다면 어떻게 그렇게합니까?
Mahathi Vempati

7
이렇게하면 객체가 확장되지 않습니다 {a: 1, b: 2, c: 3, ...}. 예를 들어 큰 객체는 잘린 형태로 인쇄합니다 (예 :) .
Galen Long

29

그렇게하는 오픈 소스 자바 스크립트 플러그인이 있지만 모든 브라우저에서 사용할 수 있습니다 -debugout.js

Debugout.js는 애플리케이션이 액세스 할 수 있도록 console.logs를 기록하고 저장합니다. 전체 공개, 나는 그것을 썼다. 다른 유형을 적절하게 형식화하고 중첩 된 오브젝트 및 배열을 처리 할 수 ​​있으며 선택적으로 각 로그 옆에 타임 스탬프를 넣을 수 있습니다. 모든 로깅 문을 제거하지 않고도 한 곳에서 라이브 로깅을 전환 할 수도 있습니다.


4
참고로, 이것은 훌륭한 도구처럼 보이지만 이미지로드가 실패하거나 기타 내장 콘솔 출력과 같은 브라우저의 출력을 캡처하지 않으므로 특수 구문을 사용하여 로그 문을 다시 작성해야합니다.
Lukus

@Lukus는 확실히 브라우저 출력을 캡처하지는 않지만 (그렇게하려면 원숭이 패치가 필요합니다) 특별한 구문은 필요하지 않습니다. 당신이 CONSOLE.LOG 것과 같은 인수를 전달
inorganik

1
@ Inorganik 나는 콘솔 출력을 캡처하는 셀레늄 테스트 방법을 찾고 있었지만 테스트 서비스에 사용되어 사용자의 웹 사이트를 제어 할 수 없습니다. 귀하의 도구는 훌륭하지만 사용자가 기존 console.log 문을 bugout.log로 다시 작성해야한다고 생각합니다. 이것이 바로 특수 구문입니다. 이번에는 브라우저 간 방법이없는 것으로 보입니다.
Lukus

아니요, 우리에게는 효과가 없습니다. 복잡한 도메인의 테스트 결과를 다른 도메인에서 실행되는 대량의 타사 스크립트와 함께 저장해야하며 대부분 변경할 수 없습니다.
Mike Keskinov 2016 년

23

나는 이것에 대한 훌륭하고 쉬운 방법을 찾았습니다.

  1. 콘솔에서-콘솔 로그 된 객체를 마우스 오른쪽 버튼으로 클릭하십시오

  2. '글로벌 변수로 저장'을 클릭하십시오

  3. 새 변수의 이름을보십시오. 예를 들어 variableName1입니다.

  4. 콘솔에 입력하십시오. JSON.stringify (variableName1)

  5. 변수 문자열 내용을 복사하십시오. 예 : { "a": 1, "b": 2, "c": 3}

여기에 이미지 설명을 입력하십시오

  1. 일부 JSON 온라인 편집기로 이동하십시오 (예 : https://jsoneditoronline.org/).

여기에 이미지 설명을 입력하십시오


1
표면이 고르지 않은 것처럼 보이지만 꽤 잘 작동합니다. 이후 버전에는 출력 하단에 "복사"버튼이 있습니다. 나는 그것을 누른 다음 클립 보드를 .json 파일로 저장하고 Visual Studio에서 매우 읽기 쉬운 작은 스크립트를 만듭니다. 유일한 변경 사항은 JSON.stringify (temp1, null, 2)를 쉽게 읽을 수 있도록하는 것입니다. 콘솔을 저장하는 아래의 트릭도 잘 작동합니다.
웨이드 해 틀러

8

더 나은 로그 파일 (Chrome- 디버그 넌센스없는)을 사용하려면 다음을 사용하십시오.

--enable-logging --log-level=0

대신에 --v=1너무 많은 정보입니다.

Chrome 콘솔에 일반적으로 표시되는 오류 및 경고가 계속 제공됩니다.

2020 년 5 월 18 일 업데이트 : 사실, 이것은 더 이상 사실이 아니라고 생각합니다. 이 로깅 수준에 관계없이 콘솔 메시지를 찾을 수 없습니다.


7

도움이 될 수도 있고 아닐 수도 있지만 Windows에서는 Windows 용 이벤트 추적을 사용하여 콘솔 로그를 읽을 수 있습니다.

http://msdn.microsoft.com/en-us/library/ms751538.aspx

통합 테스트는 .NET에서 실행되므로이 ​​방법을 사용하여 테스트 로그에 콘솔 로그를 추가합니다. https://github.com/jkells/chrome-trace 에서 보여주기 위해 샘플 콘솔 프로젝트를 만들었습니다.

--enable-logging --v = 1이 최신 버전의 Chrome에서 작동하지 않는 것 같습니다.


3

좋은 답변이 많지만 JSON.stringify (your_variable)을 사용하지 않는 이유는 무엇입니까? 그런 다음 복사하여 붙여 넣기를 통해 내용을 가져옵니다 (외부 인용 부호 제거). : 나는에서이 같은 대답을 게시 하는 방법 파일에 CONSOLE.LOG (객체)의 출력을 저장하려면?


1
에 대한 문제에 대해서는 " catch되지 않은 형식 오류가 : JSON에 원형 구조를 변환 " , 어쩌면 도움이 될 수.
KtX2SkD

2

console.log서버의 모든 파일을 JS LogFlush (plug!) 파일에 저장할 수있는 또 다른 오픈 소스 도구가 있습니다 .

JS LogFlush 는 다음을 포함하는 통합 JavaScript 로깅 솔루션입니다.

  • 클라이언트 측에서 console.log의 브라우저 간 UI없는 교체-.
  • 서버 측의 로그 스토리지 시스템.

데모


2

로컬 호스트에서 Apache 서버를 실행중인 경우 (프로덕션 서버에서는 수행하지 마십시오) 결과를 콘솔에 쓰는 대신 스크립트에 게시 할 수도 있습니다.

따라서 대신에 console.log다음을 작성할 수 있습니다.

JSONP('http://localhost/save.php', {fn: 'filename.txt', data: json});

그런 다음 save.php할 수 있습니다

<?php

 $fn = $_REQUEST['fn'];
 $data = $_REQUEST['data'];

 file_put_contents("path/$fn", $data);

1
나는 아무도 이것을 프로덕션 서버에 업로드하지 않기를 진심으로 바란다. 이것은 서버에 위험을 초래합니다.
Dave Mackintosh

첫 번째 줄을 읽지 않았습니까 : "로컬 호스트에서 Apache 서버를 실행중인 경우"?
supersan

누군가가 "localhost"(JSONP가 게시물 데이터를 요청하는 곳)에서 프로덕션 서버를 실행하는 것은 매우 어리석기 때문에 내 게시물에 대한 귀하의 투표는 정당하지 않습니다.
supersan

나는 당신의 대답에 투표하지 않았습니다. 나는 대중이 사용할 수있는 서버에 업로드 된 경우이 스크립트가 초래하는 위험을 지적했습니다.
Dave Mackintosh

1

Linux에서는 환경에서 CHROME_LOG_FILE을 설정하여 크롬이 실행될 때마다 콘솔 활동 로그를 명명 된 파일에 기록하도록 할 수 있습니다. 크롬이 시작될 때마다 로그를 덮어 씁니다. 이렇게하면 크롬을 실행하는 자동화 된 세션이있는 경우 크롬이 시작되는 방식을 변경할 필요가 없으며 세션이 끝난 후 로그가 있습니다.

CHROME_LOG_FILE = chrome.log 내보내기


0

요즘 콘솔 로그에 표시된 항목을 마우스 오른쪽 버튼으로 클릭하고 다른 이름으로 저장을 선택하고 전체 로그 출력을 컴퓨터의 파일에 저장하십시오.


0

이 스레드의 다른 솔루션은 내 Mac에서 작동하지 않았습니다. 다음은 아약스를 사용하여 문자열 표현을 간헐적으로 저장하는 로거입니다. console.save대신에 사용하십시오console.log

var logFileString="";
var maxLogLength=1024*128;

console.save=function(){
  var logArgs={};

  for(var i=0; i<arguments.length; i++) logArgs['arg'+i]=arguments[i];
  console.log(logArgs);

  // keep a string representation of every log
  logFileString+=JSON.stringify(logArgs,null,2)+'\n';

  // save the string representation when it gets big
  if(logFileString.length>maxLogLength){
    // send a copy in case race conditions change it mid-save
    saveLog(logFileString);
    logFileString="";
  }
};

필요한 내용에 따라 해당 문자열을 저장하거나 console.log복사하여 붙여 넣을 수 있습니다. 저장하려는 경우를 위해 아약스가 있습니다.

function saveLog(data){
  // do some ajax stuff with data.
  var xhttp = new XMLHttpRequest();

  xhttp.onreadystatechange = function(){
    if (this.readyState == 4 && this.status == 200) {}
  }

  xhttp.open("POST", 'saveLog.php', true);
  xhttp.send(data);
}

saveLog.php로그 파일 어딘가로 데이터를 추가해야합니다. 나는 그 부분이 필요하지 않았으므로 여기에 포함시키지 않았습니다. :)

https://www.google.com/search?q=php+append+to+log

당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.