【问题标题】:structuring html/css/java script code from website to be more readable从网站构建 html/css/javascript 代码以提高可读性
【发布时间】:2014-11-30 14:51:22
【问题描述】:

这可能是一个愚蠢的问题或什么的.. 当我打开 google.com 并查看“页面源代码”时,我看到了很多人类无法阅读的代码..

谷歌 (function(){window.google={kEI:'uS57VJ-SCNONuASrhYHwDA',kEXPI:'3300105,3300130,3300137,3300161,3310366,3310751,3312478,3700322,4010073,40154,5150,556,4514,5150,456, ,4011559,4016824,4019182,4020346,4020562,4021073,4021598,4022317,4022495,4023373,4023567,4023631,4023677,4023709,4024679,4024932,4024970,4025113,4025115,4025119,4025170,4025285,4025836,8300096,8500394 ,8500700,8500820,8500852,10200083,10200716,10200828,10200834,10200850',authuser:0,j:{en:1,bv:21,pm:'p',u:'e57ea291',qbp:0,rre :false},kSID:'uS57VJ-SCNONuASrhYHwDA'};google.kHL='en';})();(function(){google.lc=[];google.li=0;google.getEI=function( a){for(var b;a&&(!a.getAttribute||!(b=a.getAttribute("eid")));)a=a.parentNode;return b||google.kEI};google.https =function(){return"https:"==window.location.protocol};google.ml=function(){};google.time=function(){return(new Date).getTime()};google. log=function(a,b,d,e,k){var c=new Image,h=google.lc,f=google.li,g="",l=google.ls||"";c. onerror=c.onload=c.onabort=function(){删除h[f]};h[f]=c;d||-1!=b.search("&ei=")||(e=google.getEI(e),g="&ei="+e, e!=google.kEI&&(g+="&lei="+google.kEI));a=d||"/"+(k||"gen_204")+"?atyp=i&ct="+a+"&cad= "+b+g+l+"&zx="+google.time();/^http:/i.test(a)&&google.https()?(google.ml(Error("a"),!1, {src:a,glmm:1}),删除 h[f]):(c.src=a,google.li=f+1)};google.y={};google.x=function(a, b){google.y[a.id]=[a,b];return!1};google.load=function(a,b,d){google.x({id:a+m++},function( ){google.load(a,b,d)})};var m=0;})();google.kCSI={};

废话..废话..废话..

问题很明显.. 有什么工具可以让我阅读这段代码更“有趣”吗?或者至少更具可读性?

更新:我想要这个

看起来像这样:

【问题讨论】:

  • 这是缩小的 javascript 代码,你可以使用美化器,但代码仍将使用缩短的变量函数名称等,因此仍然难以阅读
  • 好吧,谢谢兄弟,真的很有帮助,无论如何我的目的是对代码进行一些分析..好吧,也许是一个无聊的东西哈哈..请点击回答按钮,老兄,所以我可以关闭这篇文章:谢谢!

标签: javascript html css coding-style


【解决方案1】:

使用 chrome 开发工具,而不是查看 页面源代码

  1. 用 chrome 打开你想要的网站。
  2. 右键单击它并选择选项检查元素
  3. 打开该工具后,查看选项卡 Elements,您可以在其中看到并处理 DOM,您将看到一个易于阅读且易于阅读的 HTML 结构关注。

【讨论】:

  • @AltianoGerung 您可以在同一个工具中看到它,转到“源”选项卡,在那里您将找到一个包含所有脚本文件的左侧菜单。当您在底部栏中打开一个脚本时,您会找到一个类似“{}”的按钮,单击它可以优化代码并使其可读。
  • 我见过,但还是很难说
【解决方案2】:

你可以试试www.textfixer.com/html/uncompress-html-code.php等在线编辑器

【讨论】:

    【解决方案3】:

    http://ctrlq.org/beautifier/http://jsbeautifier.org/

    感谢评论面板上的@Patrick Evans

    【讨论】:

      猜你喜欢
      • 2015-05-04
      • 2023-03-10
      • 1970-01-01
      • 2010-10-07
      • 2020-11-18
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2018-06-06
      相关资源
      最近更新 更多