什么是skewer？
Skewer是一个帮助开发者在浏览器上调试JavaScript脚本的npm包。它可以将JavaScript代码直接注入到浏览器的页面中，从而实现实时的调试效果。通过使用Skewer可以更方便地对网页进行调试和测试，加速对JavaScript的学习和开发。
安装Skewer
在开始使用Skewer前，我们需要使用npm命令来进行安装。在命令行窗口中输入以下代码即可：
npm install skewer安装完成后，我们就可以开始使用Skewer了。
使用Skewer
在使用Skewer进行JavaScript调试之前，我们需要先了解一下它的基本用法。下面是一个简单的示例：
-- -------------------- ---- ------- --------- ----- ------ ------ ------ ---------------- ------------------------ ------- ------ ---- ---------------- ---------- -------- -------------------- -------- ----------------------------------------------------------- -------- ------------------------- ------- -------展开代码
以上代码中，我们在页面中引入了jQuery库和Skewer库。
下面我们来看一下如何使用Skewer将代码注入到页面中。首先，在命令行窗口中执行以下命令：
skewer ./index.html
执行完成后，Skewer会在命令行窗口中输出一个URL地址，我们在浏览器中打开这个地址即可看到我们的页面。此时，我们可以在命令行窗口中执行一些JavaScript代码，并通过在页面中观察运行效果来进行调试。
例如，我们可以在命令行窗口中执行以下代码：
$("#btn").on("click",function(){ $("#title").text("你好，世界！"); });
执行完成后，我们再点击一下页面上的按钮，就会发现标题内容变为了“你好，世界！”。
Skewer的高级用法
如果我们想要对更复杂的页面进行调试，我们可以使用Skewer的一些高级用法来实现。下面是一个示例：
-- -------------------- ---- ------- --------- ----- ------ ------ ------ ---------------- -------------------------- ------- ------ ---- ---------------- ---------- -------- ---------------------- -------- ---------------------- ----- --------------------- -------- ----------------------------------------------------------- --------- ----- ----- - -- ---------- ------- ----------- -------------------------------- - ----- - --------- --- ----------------------------------- ---------- ----- ----------------------------------- -------- - -- --------------------------- ----- ---------- -------- ------------------------- ------- -------展开代码
以上代码中，我们在页面中添加了两个按钮和一个空的容器。并且在页面的底部添加了一段JavaScript代码来实现对按钮的点击事件监听，并且在点击按钮时向容器中添加一行文本。
使用Skewer进行调试的时候，我们可以通过在命令行窗口中执行代码来对按钮的事件监听和容器中文本的添加进行调试。例如，在命令行窗口中执行以下代码：
$("#btn1").trigger("click");
执行完成后，我们就可以在页面上看到新添加了一行文本。同样地，在命令行窗口中执行以下代码：
$("#btn2").trigger("click");
执行完成后，我们就可以清空页面中的文本。
以上就是Skewer的高级用法，通过这些用法我们可以更加高效地进行JavaScript脚本的调试和测试。
总结
Skewer是一个功能强大的npm包，它提供了简单易用的功能来帮助开发者进行JavaScript调试。通过掌握Skewer的使用方法，我们可以更加高效地进行网页开发和JavaScript学习。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f1a6046403f2923b035c492
