source

Javascript / Chrome - Webkit 검사기에서 개체를 코드로 복사하는 방법

bestscript 2022. 10. 23. 11:42

Javascript / Chrome - Webkit 검사기에서 개체를 코드로 복사하는 방법

object.javascript console. ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★?제가 하려고 하는 것은 xml 피드를 해석하기 위해 ajax를 사용하여 작성된 객체를 정적 javascript 객체로 변환하는 것입니다.이것에 의해, 파일은 서버 없이 로컬로 동작할 수 있게 됩니다.크롬 인스펙터 창에 객체의 스크린샷을 포함시켜 두었습니다.여기에 이미지 설명 입력

  1. Chrome 오른쪽 버튼으로 하고 Chrome을 선택합니다.Store as Global Variable를 선택합니다.'다'와 같은 .temp1변수 이름으로 지정합니다.

  2. 에는 ★★★★★★★★★★★★★★★★★★★★」copy()즉 「」, 「」입니다.copy(temp1)그러면 해당 오브젝트가 클립보드에 복사됩니다.

Chrome DevTools에서 Javascript 개체 복사

재귀 객체에 대한 주의:재귀 오브젝트를 복사하려고 하면 다음과 같이 됩니다.[object Object]탈출구는 도전하는 것이다.copy(JSON.stringify(temp1))오브젝트는 유효한 JSON으로 클립보드에 완전히 복사되므로 많은 리소스 중 하나를 사용하여 원하는 포맷을 할 수 있습니다.

Uncaught TypeError: Converting circular structure to JSON 메시지, 메시지, 메시지, 메시지, 메시지, 메시지, 메시지, 메시지, 가능.JSON.stringify의 두 번째 인수(필터 함수)를 사용하여 문제가 되는 순환 속성을 필터링합니다.자세한 내용은 이 스택 오버플로 답변을 참조하십시오.

를 마우스 버튼으로 하고 Chrome 89를 선택합니다.Copy Object(참조). 이 기능은 Chrome Developer Tools 내의 다른 장소에서도 사용할 수 있습니다.예를 들어 디버깅 중이나 네트워크 요청에 대한 내부 응답 탭에서도 사용할 수 있습니다.

다른 옵션은 다음과 같은 명령어를 그대로 사용하는 것입니다.

var x = { a: 1, b: 2 };
copy(x);

원답

콘솔에서 copy(JSON.stringify(Object_Name);사용하여 개체를 클립보드에 복사할 수 있습니다.

예: - 다음 코드를 콘솔에 복사하여 붙여넣고 ENTER를 누릅니다.이제 다른 곳에 붙여넣기(Windows의 경우 CTRL+V 또는 Mac의 경우 CMD+V)를 시도하면 {"name":"Daniel"", age":25}이 표시됩니다.

var profile = {
    name: "Daniel",
    age: 25
};

copy(JSON.stringify(profile));

이제 Chrome에서 개체를 마우스 오른쪽 버튼으로 클릭하고 "글로벌 변수로 저장"을 선택하면 이 작업을 수행할 수 있습니다. http://www.youtube.com/watch?v=qALFiTlVWdg

여기에 이미지 설명 입력

다음의 순서에 따릅니다.

  1. console.log(myObject)와 같이 코드에서 console.log를 사용하여 개체를 출력합니다.
  2. 개체를 마우스 오른쪽 버튼으로 클릭하고 "글로벌 개체로 저장"을 클릭합니다.이때 Chrome은 변수 이름을 인쇄합니다."temp1"이라고 가정해 봅시다.
  3. 콘솔에서 다음을 입력합니다.JSON.stringify(temp1).
  4. 이 시점에서 JSON 오브젝트 전체가 복사/붙여넣기 가능한 문자열로 표시됩니다.
  5. 이 시점에서 http://www.jsoneditoronline.org/과 같은 온라인 도구를 사용하여 문자열을 예쁘게 만들 수 있습니다.

요청을 통해 개체를 보낸 경우 Chrome -> Network 탭에서 개체를 복사할 수 있습니다.

요구 페이로드 - > 송신원 표시

여기에 이미지 설명 입력

여기에 이미지 설명 입력

업데이트 - Chrome 89

오른쪽 클릭 -> 객체 복사

출처: (https://developers.google.com/web/updates/2021/01/devtools?utm_source=devtools)

여기에 이미지 설명 입력

또한 디버거에서

여기에 이미지 설명 입력

이게 사실 제 문제를 해결하는데 도움이 됐어요.하지만 내가 하는 일은 효과가 있다.

테스트하고 있는 디바이스는 사파리 디버깅툴을 사용하여 Chrome에서와 같은 오브젝트를 복사할 수 없습니다.우클릭 후 오브젝트를 복사하기만 하면 됩니다.

JSON.stringify를 사용하여 콘텐츠를 https://beautifier.io에 붙여넣으려고 했지만 다시 포맷해야 합니다.

결국 로컬 스토리지와 복사 방법을 사용하게 되었습니다.

코드 사용 시.

localStorage.setItem('dataCopy', JSON.stringify(data));

그런 다음 콘솔에 붙여넣고 Enter를 클릭합니다.

copy(JSON.parse(window.localStorage.dataCopy))

그런 다음 클립보드에 객체 배열이 표시됩니다.

이렇게 하면 재귀적 요소를 생략하여 심층 객체를 문자열화하는 데 도움이 됩니다.Window그리고.Node물건들.

function stringifyObject(e) {
  const obj = {};
  for (let k in e) {
    obj[k] = e[k];
  }

  return JSON.stringify(obj, (k, v) => {
    if (v instanceof Node) return 'Node';
    if (v instanceof Window) return 'Window';
    return v;
  }, ' ');
}

개체를 문자열로 콘솔할 수 있습니다.

var objToString = JSON.stringify(obj)
console.log(objToString );

그런 다음 메모장 ++와 같은 편집기에서 출력을 붙여넣고 플러그인 형식을 사용합니다.

JSFormat

"Store as a Global Variable"(글로벌 변수로 저장)을 사용하면 동작하지만 객체의 마지막 인스턴스만 가져오고 객체가 기록되는 순간에는 사용되지 않습니다(실행되는 객체에 대한 변경 내용을 비교할 가능성이 높기 때문입니다.오브젝트가 수정되는 정확한 시점에 도달하기 위해, 저는 이것을 사용합니다.

function logObject(object) {
    console.info(JSON.stringify(object).replace(/,/g, ",\n"));
}

그렇게 부르면...

logObject(puzzle);

데이터에 쉼표가 포함되어 있는 경우 .replace(/.g, ",\n") 정규식을 삭제할 수 있습니다.

그래서, 이 문제가 있었는데, [객체 객체]가 있다는 것만 빼면요.

재귀로 이 작업을 수행할 수 있을 거라고 확신하지만, 저는 이 작업이 성공했습니다.

내 콘솔에서 수행한 작업은 다음과 같습니다.

var object_that_is_not_shallow = $("all_obects_with_this_class_name");
var str = '';
object_that_is_not_shallow.map(function(_,e){
    str += $(e).html();
});
copy(str);

그런 다음 편집기에 붙여넣습니다.

저장할 데이터를 마우스 오른쪽 버튼으로 클릭합니다.

  • 먼저 저장할 데이터를 마우스 오른쪽 버튼으로 클릭하고 -> "Store as global variable"을 선택하면 새 temp 변수가 다음과 같이 나타납니다. (temp3 variable)콘솔에 새 온도 변수가 표시됨
  • 두 번째 사용 명령어 copy(temp_variable_name)와 같은 그림: 여기에 이미지 설명을 입력한 후 원하는 위치에 데이터를 붙여넣을 수 있습니다.도움이 되기를 바라다/

콘솔에 추가 후 실행

copy(JSON.stringify(foo));

그러면 JSON이 클립보드에 복사됩니다.

언급URL : https://stackoverflow.com/questions/10305365/javascript-chrome-how-to-copy-an-object-from-the-webkit-inspector-as-code