목차
回复内容:
웹 프론트엔드 H5 튜토리얼 毫无排版和缩进的 JavaScript 代码,怎么阅读?

毫无排版和缩进的 JavaScript 代码,怎么阅读?

Jun 07, 2016 am 08:42 AM
http reader static

比如这个页面(static.zhihu.com/static),还有很多都跟这个一样,找到源代码页面想看看页面是怎么实现的,无奈毫无排版和缩进,看起来一头雾水啊,这种页面的js代码要怎样阅读?还是我获取源代码的方法本来就是错的?望解答。

回复内容:

打开chrome,打开一个页面,比如目前这个页面吧 zhihu.com/question/2019
按Ctrl+shift+I 打开开发者工具,点Scripts选项卡。
下面有一个图标为两个花括号的按钮{},鼠标放上去提示是pretty print,点一下,js代码就有换行了。
毫无排版和缩进的 JavaScript 代码,怎么阅读?
其他浏览器都有类似的开发者工具。试试吧。~ jsbeautifier.org/ 至于阅读,淘宝之前可以看到源代码的,现在也只有生产环境能看到了。

你可以找作者索取。或者看一些开源的代码 uglifyjs -b 赞同@天祁,可以用jsbeautifier.org/在线格式化代码。不过作用不是很大,因为很多线上产品即使格式化了也没法看,比如你说的这个链接,是经过goog closure compiler压缩过的, advance模式。
只是偶尔用来格式化下压缩的代码方便调试,或者看一些很短的代码片段才会用这个方法。 这是压缩后的产品代码。

开发环境的代码绝不会是这个样子的。

不然也太搞笑了。 这个显然是发布代码,会去掉注释,变量名都是用abcd之类的代替而非有意义的词,提高效率,减少网络传输。最好能找到开发代码,这个就算有缩进和换行,所有的变量都是不知道干嘛的魔法变量,只能猜,读起来很空难哎 Sublime Text里有个插件JsFormat,可以格式化Js代码。
比如开始时这样:
毫无排版和缩进的 JavaScript 代码,怎么阅读?JsFormat后
毫无排版和缩进的 JavaScript 代码,怎么阅读? 先排版和缩进再阅读.
编辑器比如 Sublime Text 2 可以用包管理直接安装插件调用进行排版
github.com/jdc0589/JsFo
当然在线版本更好
不济的话找个模块找 REPL 里面加载模块把文件办了 Online JavaScript beautifier DW或VS都有格式化功能
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

핫 AI 도구

Undresser.AI Undress

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

인기 기사

R.E.P.O. 에너지 결정과 그들이하는 일 (노란색 크리스탈)
2 몇 주 전 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. 최고의 그래픽 설정
2 몇 주 전 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. 아무도들을 수없는 경우 오디오를 수정하는 방법
2 몇 주 전 By 尊渡假赌尊渡假赌尊渡假赌

뜨거운 도구

메모장++7.3.1

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

Adobe Acrobat Reader에서 자동 업데이트를 비활성화하는 방법 Adobe Acrobat Reader에서 자동 업데이트를 비활성화하는 방법 Mar 14, 2024 pm 08:58 PM

AdobeAcrobatReader는 PDF 파일을 보고 편집할 수 있는 강력한 도구입니다. 이 소프트웨어는 무료 버전과 유료 버전으로 모두 제공됩니다. PDF 파일을 편집하기 위해 Adobe Acrobat Reader를 사용해야 하는 경우 유료 플랜을 구매해야 합니다. 최신 개선 사항과 보안 수정 사항을 적용하여 Adobe Acrobat Reader를 최신 상태로 유지하기 위해 소프트웨어에서는 기본적으로 자동 업데이트를 활성화합니다. 그러나 원하는 경우 자동 업데이트를 비활성화하도록 선택할 수 있습니다. 이 문서에서는 Adobe Acrobat Reader에서 자동 업데이트를 비활성화하는 방법을 보여줍니다. Adobe Acrobat Reader에서 자동 업데이트를 비활성화하는 방법

http 상태 코드 520은 무엇을 의미합니까? http 상태 코드 520은 무엇을 의미합니까? Oct 13, 2023 pm 03:11 PM

HTTP 상태 코드 520은 서버가 요청을 처리하는 동안 알 수 없는 오류가 발생하여 더 구체적인 정보를 제공할 수 없음을 의미합니다. 서버가 요청을 처리하는 동안 알 수 없는 오류가 발생했음을 나타내는 데 사용됩니다. 이는 서버 구성 문제, 네트워크 문제 또는 기타 알 수 없는 이유로 인해 발생할 수 있습니다. 이는 일반적으로 서버 구성 문제, 네트워크 문제, 서버 과부하 또는 코딩 오류로 인해 발생합니다. 상태 코드 520 오류가 발생하면 웹사이트 관리자나 기술 지원팀에 문의하여 자세한 정보와 지원을 받는 것이 가장 좋습니다.

웹 페이지 리디렉션의 일반적인 애플리케이션 시나리오를 이해하고 HTTP 301 상태 코드를 이해합니다. 웹 페이지 리디렉션의 일반적인 애플리케이션 시나리오를 이해하고 HTTP 301 상태 코드를 이해합니다. Feb 18, 2024 pm 08:41 PM

HTTP 301 상태 코드의 의미 이해: 웹 페이지 리디렉션의 일반적인 응용 시나리오 인터넷의 급속한 발전으로 인해 사람들은 웹 페이지 상호 작용에 대한 요구 사항이 점점 더 높아지고 있습니다. 웹 디자인 분야에서 웹 페이지 리디렉션은 HTTP 301 상태 코드를 통해 구현되는 일반적이고 중요한 기술입니다. 이 기사에서는 HTTP 301 상태 코드의 의미와 웹 페이지 리디렉션의 일반적인 응용 프로그램 시나리오를 살펴봅니다. HTTP301 상태 코드는 영구 리디렉션(PermanentRedirect)을 나타냅니다. 서버가 클라이언트의 정보를 받을 때

Nginx 프록시 관리자를 사용하여 HTTP에서 HTTPS로 자동 점프를 구현하는 방법 Nginx 프록시 관리자를 사용하여 HTTP에서 HTTPS로 자동 점프를 구현하는 방법 Sep 26, 2023 am 11:19 AM

NginxProxyManager를 사용하여 HTTP에서 HTTPS로의 자동 점프를 구현하는 방법 인터넷이 발전하면서 점점 더 많은 웹사이트가 HTTPS 프로토콜을 사용하여 데이터 전송을 암호화하여 데이터 보안과 사용자 개인 정보 보호를 향상시키기 시작했습니다. HTTPS 프로토콜에는 SSL 인증서 지원이 필요하므로 HTTPS 프로토콜 배포 시 특정 기술 지원이 필요합니다. Nginx는 강력하고 일반적으로 사용되는 HTTP 서버 및 역방향 프록시 서버이며 NginxProxy

http 상태 코드 403이란 무엇입니까? http 상태 코드 403이란 무엇입니까? Oct 07, 2023 pm 02:04 PM

HTTP 상태 코드 403은 서버가 클라이언트의 요청을 거부했음을 의미합니다. http 상태 코드 403에 대한 해결 방법은 다음과 같습니다. 1. 서버에 인증이 필요한 경우 올바른 자격 증명이 제공되었는지 확인합니다. 2. 서버가 IP 주소를 제한한 경우 클라이언트의 IP 주소가 제한되어 있거나 블랙리스트에 없습니다. 3. 파일 권한 설정을 확인하십시오. 403 상태 코드가 파일 또는 디렉토리의 권한 설정과 관련되어 있으면 클라이언트가 해당 파일 또는 디렉토리에 액세스할 수 있는 권한이 있는지 확인하십시오. 등.

빠른 적용: 여러 파일의 PHP 비동기 HTTP 다운로드에 대한 실제 개발 사례 분석 빠른 적용: 여러 파일의 PHP 비동기 HTTP 다운로드에 대한 실제 개발 사례 분석 Sep 12, 2023 pm 01:15 PM

빠른 적용: PHP의 실제 개발 사례 분석 여러 파일의 비동기 HTTP 다운로드 인터넷의 발전으로 파일 다운로드 기능은 많은 웹 사이트와 응용 프로그램의 기본 요구 사항 중 하나가 되었습니다. 여러 파일을 동시에 다운로드해야 하는 시나리오의 경우 기존 동기 다운로드 방법은 비효율적이고 시간이 많이 걸리는 경우가 많습니다. 이러한 이유로 PHP를 사용하여 HTTP를 통해 여러 파일을 비동기적으로 다운로드하는 것이 점점 더 일반적인 솔루션이 되었습니다. 본 글에서는 실제 개발 사례를 통해 PHP 비동기 HTTP를 활용하는 방법을 자세히 분석해 보겠습니다.

http 요청 415 오류 해결 방법 http 요청 415 오류 해결 방법 Nov 14, 2023 am 10:49 AM

해결 방법: 1. 요청 헤더에서 Content-Type을 확인합니다. 2. 요청 본문에서 데이터 형식을 확인합니다. 3. 적절한 인코딩 형식을 사용합니다. 4. 적절한 요청 방법을 사용합니다. 5. 서버측 지원을 확인합니다.

C#의 일반적인 네트워크 통신 및 보안 문제와 솔루션 C#의 일반적인 네트워크 통신 및 보안 문제와 솔루션 Oct 09, 2023 pm 09:21 PM

C#의 일반적인 네트워크 통신 및 보안 문제와 해결 방법 오늘날 인터넷 시대에 네트워크 통신은 소프트웨어 개발에 없어서는 안 될 부분이 되었습니다. C#에서는 일반적으로 데이터 전송 보안, 네트워크 연결 안정성 등과 같은 일부 네트워크 통신 문제가 발생합니다. 이 문서에서는 C#의 일반적인 네트워크 통신 및 보안 문제에 대해 자세히 설명하고 해당 솔루션과 코드 예제를 제공합니다. 1. 네트워크 통신 문제 네트워크 연결 중단: 네트워크 통신 과정에서 네트워크 연결이 중단될 수 있으며, 이로 인해

See all articles