从 chrome 或 firefox 中的调试控制台对 .js 文件运行 JSLint

Posted

技术标签:

【中文标题】从 chrome 或 firefox 中的调试控制台对 .js 文件运行 JSLint【英文标题】:Run JSLint on a .js file from debugging console in chrome or firefox 【发布时间】:2012-08-06 17:25:50 【问题描述】:

是否可以在一个或多个 .js 文件上运行 JSLint,方法是之后在 chrome 或 firefox 的调试/开发者控制台的标头中加载 JSLint?

我想这样做的原因是我想在console.log() 中打印JSLintJSON 中的解析,它在文档中说:

// You can obtain the parse tree that JSLint constructed while parsing. The
// latest tree is kept in JSLINT.tree. A nice stringication can be produced
// with
//     JSON.stringify(JSLINT.tree, [
//         'string',  'arity', 'name',  'first',
//         'second', 'third', 'block', 'else'
//     ], 4));

【问题讨论】:

你的意思是你想在你的文件系统中的某个 javascript 文件上运行 JSLint,但该文件没有包含在使用 script 标签的页面中? @Cracker 是的,最终要在控制台中逐行运行,然后放一个console.log(JSON.stringify(JSLINT.tree,...)) 我认为如果不将它们包含在带有脚本标签的页面上,您将无法访问系统上的文件。我可以知道这样做的目的,以便我可以建议是否有其他选择吗? 另外你确定你需要解析树而不是 JSLint 检测到的错误吗? @Cracker 是的,我想要解析树而不是错误。从控制台我可以在标题中加载 .js 看到这个:***.com/questions/5282228/… 我的问题仍然存在,一旦我加载了 JSLint,如何在已经运行的 javascript 文件上运行它。 【参考方案1】:

您可以使用以下语法在 JavaScript 代码上运行 JSLint:

var code = "var a = 1 + 2;";
JSLINT(code);

您可以打印问题中提到的语法树。

现在,您需要从 JavaScript 文件中读取 JavaScript 源代码。您可以进行 AJAX 调用以将 JavaScript 文件的源代码读入变量。然后像上面那样调用 JSLINT 并传递该变量。使用 jQuery 的示例如下所示。

$(function() 
    // Include jslint.js
    $('<script src="http://localhost/yourapp/jslint.js">').appendTo("head");

    // Read JavaScript file contents into 'code'
    $.get('http://localhost/yourapp/somescript.js', function(code) 

        // Run JSLINT over code
            JSLINT(code);

        // Print the parse tree
        console.log(JSON.stringify(JSLINT.tree, [
                    'string',  'arity', 'name',  'first',
                    'second', 'third', 'block', 'else'
                    ], 4));
        );
);

根据您要实现的目标,独立的 JavaScript 控制台(例如 NodeJS)将是比浏览器控制台更好的选择。我猜 JSLint 存在 Node 包。但是,如果您想手动包含它,您可以简单地按照以下方式进行。

首先在 jslint.js 末尾添加下面一行

exports.JSLINT = JSLINT;

然后在 mycode.js 中编写你的代码。

var fs = require("fs");
var jslint = require("./jslint.js");

fs.readFile("./test.js", function(err, code) 
    var source = code.toString('ascii');    

    jslint.JSLINT(source);

    console.log(JSON.stringify(jslint.JSLINT.tree, [
         'string',  'arity', 'name',  'first',
         'second', 'third', 'block', 'else'
        ], 4));
,"text");

然后从控制台运行您的代码:

node mycode.js

【讨论】:

这正是我所需要的,尤其是 JQuery 示例。我也安装了节点。 @EduardFlorinescu 我也包含了一个 Node 示例。 关于在 chrome 控制台中运行的一些规范,您需要使用此命令行开关运行 chrome --disable-web-security 参见 superuser.com/questions/384871/… 还需要确保已加载 jquery var script= document.createElement('script'); script.type='text/javascript'; script.src='http://localhost/jquery.js'; document.head.appendChild(script); 有了这些,get 中的代码仍然无法运行。节点一工作。 我编辑了jQuery get的答案,添加了数据类型,没有在get中指定“文本”数据类型,代码不起作用,它工作得很好。

以上是关于从 chrome 或 firefox 中的调试控制台对 .js 文件运行 JSLint的主要内容,如果未能解决你的问题,请参考以下文章

前端调试入门

如何从 Firefox 或 Chrome 浏览器手动发送 HTTP POST 请求

Chrome 和 Firefox 中的 UL 余量过大

JavaFX WebView 中的 Html/Javascript 调试

浏览器控制台命令调试——console

datepicker从调试控制台中选择日期