浏览器集成

这是一款用于与浏览器（目前仅限Chrome和Firefox）交互及执行与网页开发相关任务的Sublime Text 3插件。

免责声明

此插件处于开发状态，意味着它是不确定的，可能在您的系统中无法运行。它应与Google Chrome和Chromium浏览器31至34版本以及Linux，MacOSX和Windows上的现代版本的Firefox兼容，但是至今为止仅在以下环境下进行了测试：

• Ubuntu Linux 13.10 x86 + ST3 (3059) + Chrome 31
• Windows 8 x64 + ST3 (3047) + Chrome 32

当前的迭代版本不断改变大多数命令的名称、键绑定和语义，因此每次升级时，某些功能可能无法像以前那样正常工作。对此表示歉意，我将尽最大努力推出一个稳定的版本，但这需要一些时间……

这是什么？

此插件启动一个浏览器（目前仅Chrome和Firefox），并与它保持一个连接，从而使您可以从ST3内部发送命令和控制浏览器。

我被和他在多媒体连接方面的工作所启发，制作了这个插件。基本上，这意味着开发者应该尽可能地接近他们的作品，在当前的网页开发环境中，我对其可达到的连通水平并不满意。

作为Web开发者，我们大多数时间都在两个不同的环境中工作：我们的文本编辑器和浏览器。我们必须不断地从输入代码切换到刷新浏览器，从在浏览器开发控制台测试短期脚本，到在服务器上编写更复杂的脚本，从检查DOM元素并更改CSS，回到文本编辑器以确保新的CSS规则适合之处。

此插件是我尝试使这两个工具更接近的一种尝试，并在浏览器和文本编辑器之间创建一种实际上使您感觉您正在使用一个单一连接工具，而不是两个不同技术的分散部分。

注意：该插件正在使用 Chromium 进行积极开发。对其他浏览器（s）的支持是实验性的。自行承担风险。

安装

推荐方法是使用 Sublime Package Control。如果您不知道它是什么，请去查看。

您还可以直接从 Github 克隆，或下载一个 zip 文件，并将其解压缩到您 Sublime Text 3 的包文件夹中。如果您不知道如何操作，您绝对需要 Package Control 插件。

此外，您还需要安装最新版本的 Chrome（31 到 34）以及 Chrome WebDriver 可执行文件。在安装插件后，它会尝试直接从 sublime.apiad.net 下载适用于您的平台的正确可执行文件（约 5~10 MB），并将其放置在插件相同的文件夹中（这只需执行一次）。如果不起作用，您可以尝试手动下载，将其重命名为 chromedriver，并将其放置在 *.sublime-package 文件旁边（它应在您的 Packages/ 文件夹或 Installed Packages/ 文件夹的根目录下），并授予执行权限。如果遇到这种情况，请考虑填写相应的 问题，以帮助我改进插件。

配置

按 ctrl+shift+p，然后转到“浏览器集成：设置（默认）”以阅读（并可能更改）所有可用的配置参数。

特性

目前，它可以这么做

主菜单

组合键： ctrl+alt+shift+b

打开一个菜单面板，您可以在其中找到所有可用的命令，导航，查看描述等。如果您不确定，从这个地方开始。所有命令都可以通过此菜单访问，但是大多数命令也有直接的快捷键。

第一个命令始终是 启动浏览器。在运行任何其他与浏览器相关的命令之前，这是一步必要的步骤。

启动浏览器

组合键： ctrl+shift+b,l

打开一个快速面板，以选择要打开的浏览器。目前它显示 Chrome 和 Firefox。选择一个来启动它。所有其他浏览器命令都需要先调用此命令，如果浏览器没有打开或插件丢失了某种连接，将（在状态栏中）发出抱怨。

浏览器已打开后，主菜单将显示更多命令。您可以直接与打开的浏览器交互，创建新的标签页，单击内容等。然而，只有第一个打开的标签页将由插件控制，如果关闭，将丢失连接，您需要再次启动浏览器。只有通过此命令打开的浏览器实例才受控制，它不适用于已经打开的浏览器。

打开浏览器后，它会自动导航到您的配置启动页面。这可以在默认配置中的 startup_location 设置中更改。

重新加载

组合键： ctrl+shift+b,r

重新加载浏览器。您可以将 reload_on_save 设置配置为在保存时自动调用此命令。reload_on_save_selectors 包含一个正则表达式列表。每次保存文件时，如果其文件名与任何正则表达式匹配，浏览器将重新加载。默认情况下，此选项设置为在保存任何 HTML、CSS 或 JavaScript 文件时重新加载。

导航到

组合键： ctrl+shift+b,n

如果当前页面有链接（有 href 属性定义的 a 标签），将显示一个快速面板显示所有可用的链接。选择任何一个都将使浏览器导航到它。

前三个选项是特殊链接。第一个选项（自定义URL）打开一个输入面板，输入要导航的自定义URL。当前加载的URL已经选取在输入面板中。如果您没有输入有效的定位器（如http、https等），则http://将自动附加到URL上。第二个（后退）和第三个（前进）选项允许您分别前后导航。

执行

此子菜单中的命令允许您将代码和数据注入浏览器。

执行 :: 选中代码

快捷键： ctrl+shift+b/e/c

获取选中的JavaScript源代码并在浏览器中运行。如果代码返回某些内容，它将在新标签页中打开。对于每个选中的区域，这是独立进行的，需要打开与每个返回内容的选中脚本片段一样多的标签页。

查看

此子菜单中的命令允许您加载和修改（有时是实时）文档数据。目前这些选项：

查看 :: 内联样式表（CSS）

快捷键： ctrl+shift+b/v/c

打开一个快速面板，列出当前浏览器中加载的所有样式表。导入的样式表（link标签）按URL列出。内嵌样式表（style标签）独立列出，并有小预览的内联样式代码。选择条目之一时，将打开一个新标签页，其中包含样式表的内容。

如果是导入的样式表，插件将尝试自动在您的项目文件夹中定位相应的静态文件。为此，您必须定义映射，使插件能够将href与文件名相关联。static_files_mapping设置选项正是这样做，使用正则表达式。其默认值是

"static_files_mapping": [
    // Django-style matches.
    // Links like `http://localhost:8000/static/path/to/style.css`
    // will match all your internal projects `/static/` dirs,
    // but **not** the external `static/` folder where Django
    // collects static files.
    {
        "selector": "^http[s]?://localhost:\\d+/static/(.*)\\.css$",
        "matches": [
            "^(.+)/static/\\1.css$"
        ]
    },
    // Exact matches.
    // Links like `http://localhost:8000/path/to/style.css` will
    // match exactly those file paths in your project folders.
    {
        "selector": "^http[s]?://localhost:\\d+/(.*)\\.css$",
        "matches": [
            "^\\1.css$"
        ]
    }
]

如果您了解正则表达式，您将很容易看出正在进行什么操作。一个selector与一个href进行匹配，如果匹配，则项目文件夹将搜索与对应正则表达式匹配的文件名。允许向前替换。第一个匹配的文件名将被打开。如果没有文件匹配，则命令将尝试下载link标签的href属性，并在新标签页中打开它。

目前我正在开发这些映射CSS文件的实时编辑功能，与自动异步浏览器重新加载，我非常兴奋，但仍在努力使其工作。

如果是内嵌的，则命令将复制style标签的innerHTML属性，并在新标签页中粘贴它。修改内联CSS样式表的内容将自动（异步）重新加载浏览器中的innerHTML属性。

查看 :: 页面源代码

快捷键： ctrl+shift+b/v/s

在新标签页中打开文档源代码。我尝试过实现此页面源的实时修改，这肯定是有可能的，但似乎相当无用。在Web开发中，您大多数时间不会编写原始HTML，而是依赖于某些模板引擎，因此源代码仅用于查看是否如预期，但在实际中很少修改。

查看 :: LocalStorage 内容

快捷键： ctrl+shift+b/v/l

在新文档中打开localStorage的内容。如果您的localStorage中的值是JSON编码的对象，它们将在新缓冲区中解码。修改此缓冲区的内容将自动更改localStorage的内容以匹配缓冲区的内容，只要它是有效的JSON文件。您不需要保存缓冲区以使更改反映在浏览器上，它们将在您输入时自动更新。

注意：出于安全考虑，插件放入localStorage的内容不会被回传。插件在localStorage中设置的数据存储在以'__bi_'开头的键中，因此请避免使用此类前缀的键。

交互

此子菜单中的命令允许您直接与DOM元素交互。

交互 :: 通过CSS选择

快捷键： ctrl+shift+b,i,s

打开一个输入框，您可以在其中输入任何有效的CSS选择器。匹配的项目在您键入时会亮显在浏览器中，并在关闭后保留亮显。这些选定的元素可以用在其他命令中，以进行特定的DOM操作。要取消选择，请再次启动该命令，并清除输入面板。

交互 :: 通过XPath选择

快捷键： ctrl+shift+b,i,x

与前述操作相同，但现在您可以选择XPath表达式。

交互 :: 交互式选择

快捷键： ctrl+shift+b,i,i

打开一个快速面板，其中包含DOM的树状表示。您可以浏览面板并选择特定节点以突出显示并选择它。按ENTER键浏览节点的子节点。当前选中的节点会在浏览器中自动突出显示。

如果您之前已经以任何方式选择了DOM元素，以下命令将允许您修改这些元素。这些命令仅在您选择了元素的情况下将出现在主菜单中。

交互 :: 点击选定的元素

快捷键： ctrl+shift+b,i,c

向选定的元素发送点击。

交互 :: 在选定的元素中输入

快捷键： ctrl+shift+b,i,t

打开一个输入框以输入文本，该文本将被发送到浏览器并以输入方式输入到所选元素中。

交互 :: 改变选定的元素类

快捷键： ctrl+shift+b,i,s

打开一个输入框，显示所选元素的class属性值。如果有多个选定的元素，并且它们有不同的类，则输入框将显示元素class属性值的并集。在输入面板中输入将实时更新所选元素class属性。

宏

此子菜单中的命令允许您记录、保存和回放浏览器交互会话。通过结合这些命令，您可以轻松自动化一些繁琐的任务。例如，每次我处理我的网站项目时，我都会打开ST3，启动我的开发服务器，打开Chrome，导航到localhost:9090，输入我的凭据，然后我可以开始开发。

宏 :: 开始记录宏

快捷键： ctrl+shift+b,m,r

开始记录浏览器交互。目前该插件记录鼠标和键盘输入。对于鼠标，目前只记录左鼠标键的鼠标按下和鼠标释放。对于键盘输入，它已经与英文和数字键进行了测试。该插件还记录交互发生的DOM元素，以及鼠标输入中鼠标位置相对于该元素的相对坐标。

事件数据将保存到localStorage中，因此尽量不要记录过长的宏。几千次交互是可以的。

注意：在记录宏时有一些事情不允许在ST3和浏览器中执行。特别是在录制过程中，它涉及到一些JavaScript的持续执行。因此，您在录制过程中无法打开浏览器开发控制台（是的，您可以打开，但几乎会立即关闭）。我目前正在研究缓解这种情况的方法，很抱歉带来不便。

宏 :: 停止录制

快捷键： ctrl+shift+b,m,s

收集所有宏录制数据，以便查看并保存在ST3中。如果有任何数据（事件）被记录，将显示一个输入面板来输入宏的名称，在按下 ENTER 键后，宏数据将在新文件中显示。此数据是一个包含所有必要信息以重新播放记录事件的有效JSON对象。您可以将文档保存在项目目录中的任何位置，以便稍后回放。

宏 :: 播放宏

快捷键： ctrl+shift+b,m,p

在您的项目目录中寻找所有 .macro 文件，并将它们显示在列表中。选择其中一个将重新播放在宏中记录的所有事件。

警告： 保存的宏数据仅包含DOM事件。它不知道宏记录在哪或何时记录。如果您找到符合记录事件描述的当前页面元素，它将重新播放它们。如果您在某个页面上记录宏，然后在其他页面上回播它，请注意哪些元素将被单击或输入！正如他们所说：能力越大，责任越大。

宏 :: 延迟播放宏

快捷键： ctrl+shift+b,m,d

与之前相同，但这次会重复事件之间的延迟。如果您录制的宏针对具有动画或其他复杂交互的页面，这将很有用。没有延迟播放宏可能会导致行为不正确，因为一些元素可能不会立即出现，而宏将失败。此命令使用 time.sleep 进行等待，所以回放的事件可能与原始事件具有完全相同的延迟，但应该适用于大多数情况。为了避免不必要的等待，当记录的延迟小于 10 毫秒时，不会执行延迟。

关闭浏览器

快捷键： ctrl+shift+b,q

根据预期，关闭当前浏览器实例。

它是如何工作的？

此插件附带修改版的 适用于Python的selenium，它执行浏览器控制的魔法操作。还有一些方便的JavaScript和Python，这完成了工作。

接下来是什么？

我正在开发一些令人兴奋的新功能

• 实时CSS编辑。
• 改进宏录制和播放。
• 支持其他浏览器（Firefox、Opera，甚至可能是IE）。
• 还有更多…

协作

当然，来到GitHub。

有许多方式可以协作：只需试一试并填写任何问题，这将非常有帮助。开发多平台Sublime Text插件非常困难，尤其是当你必须处理不同浏览器的实现时，我无法测试所有Sublime Text + 浏览器 + 操作系统组合，因此Beta测试是您可以提供的最宝贵的帮助。

如果您想将一些代码放入插件，那就更好了！像往常一样，Fork它，并创建拉取请求。我非常期待看到其他像您这样的开发者能想出什么惊人的东西… ;)

您还可以提出更改、功能和任何有趣的想法。