在Chrome开发者工具中编写JavaScript

Question

在Firebug中，我可以在控制台选项卡中键入自己的JavaScript并执行它。在Chrome开发者工具中是否有一种方法可以输入JavaScript并执行它？

在Chrome开发者工具中，您可以在控制台选项卡中键入JavaScript并执行它。

- Andrew Koper

---

谢谢。我想我知道我可以在那里写一行代码。有没有办法我可以写多行JavaScript？ - Andrew Koper

Answer 1

1. 进入 chrome://flags/，启用“启用开发者工具实验”标志并重新启动Chrome（或使用命令行标志--enable-devtools-experiments启动它）。
2. 打开 DevTools，进入 设置 对话框，切换到 实验 选项卡。
3. 启用“片段支持”实验，关闭并重新打开 DevTools。
4. 进入 源代码 面板。在左侧导航栏中，切换到 片段 选项卡。
5. 在此选项卡中的[空]树中右键单击，选择 新建 上下文菜单项。
6. 给新片段任何你喜欢的名称，并输入片段正文。
7. 完成后，在状态栏中单击 运行 (>) 按钮以执行片段正文。您可以在片段中设置断点并调试它们，就像普通脚本一样。

- Alexander Pavlov

---

使用Chromium版本20.0.1132.47 Ubuntu 12.04（144678），我发现步骤2、4和5略有不同：2）打开开发者工具（工具 > 开发者工具 - 或 Shift + Ctrl + I），单击设置图标（位于右下角的小齿轮），然后向下滚动到“实验”部分。第3步相同。4）切换到“脚本”面板。必要时单击树状图标。现在你会看到三个选项卡，Scripts，Content Scripts和Snippets。切换到“Snippets”选项卡。5）在此选项卡中的[空白]树中右键单击，选择“创建片段”上下文菜单项。 - floer32

然而，当我点击“创建片段”后似乎没有任何反应。也许这是 Chromium 的版本存在的一个 bug。 - floer32

你怎么还在使用Chromium 20？你一定要更新，因为它存在很多安全漏洞。 - Alexander Pavlov

截至2015年8月，该功能在稳定版本中得到支持。 - etov

@etov 感谢您的留言。然而，我发现在片段中没有像控制台那样的“智能感知”。 - flow2k

Answer 2

步骤1：打开 Google Chrome 开发者工具 [按 f12 ]

步骤2：点击 Sources 选项卡

步骤3：在左侧面板中，点击 Snippets 选项卡（如果隐藏了，点击 >> 即可显示）

步骤4：要创建新的代码片段，请点击 + 新建代码片段 或在导航器中右键单击，然后选择 新建

步骤5：将代码编写到中间面板并保存。

步骤6：运行代码片段有三种方法

       A: Ctrl + Enter

       B: Click on Run button [ Into Right-side panel, Top-Left button ]

       C: Right-click on the snippet filename (in the pane on the left that lists
          all your snippets) and select Run.

- mistertandon

Answer 3

最近版的Chrome浏览器 使用Chrome 50版本，只需打开"控制台"选项卡，然后在控制台底部开始键入和执行代码。

上箭头可以调回之前的代码，ctrl-enter可以新起一行：

- maxbellec

Answer 4

你不能调试Javascript，但是你可以在chrome检查器的REPL中执行它（包括jquery）。

1. 打开检查器
2. 点击左下角带有3条线的按钮-其工具提示为“显示控制台”
3. 键入您的javascript并按Enter键

请注意，通常您必须转到“源”选项卡并单击“暂停脚本执行”按钮，以便评估您的javascript。

- Chris Adams