Chrome DevTools에서 동적으로 생성 된 CSS 소스를 볼 수 있습니까?

HTML, CSS 및 추가 자바 스크립트를 출력하는 Javascript 위젯을로드했습니다.Chrome DevTools에서 동적으로 생성 된 CSS 소스를 볼 수 있습니까?

페이지 (인 test.html)의 소스는

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <title>Widget Test</title> 
</head> 
<body> 
    <div id="widget"></div> 
    <script type="text/javascript" src="http://widgets.some.site/render?element_id=widget_id&customer_id=999999&gallery=22222&widget_config=769792669" async="async"> 
</script> 
</body> 
</html>

스크립트 실행하고 위젯을 생성한다. Chrome DevTools의 요소 탭에서 HTML 노드를 볼 수 있습니다. 특정 요소를 검사 할 때 검사관은 스타일이 test.html : 239에 있다고 말하지만 링크를 클릭하면 원본 페이지가 다시 표시됩니다.

파이어 버그에서 페이지를로드 할 때 라인 번호를 클릭하면 파이어 폭스가 관리하는 스타일 시트의 내부 버전으로 이동합니다. Chrome DevTools에서이 작업을 수행하는 방법이 있습니까? 필자는 매우 쉽게 복사하여 붙여 넣기가 가능하기 때문에 Firebug의 동적으로 생성 된 CSS 출력을 좋아합니다.

출처

2013-04-29 Stephen

마우스 오른쪽 버튼으로 클릭하고'요소 검사 '를 클릭하십시오. 거기에서 생성 된 HTML을 볼 수 있습니다. –

그걸 보았습니다.하지만 원했던 것은 아닙니다. 요소 검사기의 오른쪽에있는 CSS 패널에서 요소의 스타일을 클릭하고 싶었습니다. CSS가 동적으로 생성되기 때문에 CSS 소스 행을 클릭하면 스크립트 태그 만있는 소스 파일로 다시 연결됩니다. – Stephen

아니, 당신은 를 들어, 기본있다는 어디에도 저장되지 않고 외부 또는 인라인 스타일 시트에 대한 권리 분석 후 버려지는 달리 동적으로 생성 <style> 태그, 소스를 볼 수 없습니다 소스 텍스트 (foo.css 파일 또는로드 된 문서 <style> 태그에 있음).

스타일 시트 자체를 볼 수 없기 때문에이 문서로 이동했습니다.이 경우 DevTools의 최선의 노력입니다.

출처

2013-04-30 11:56:13

Chrome DevTools에서 동적으로 생성 된 CSS 소스를 볼 수 있습니까?

답변

관련 문제