前端开发人员的远程调试-css教程-PHP中文网

前端开发人员的远程调试

前端开发曾经很容易。您可以在几个不同的计算机 /操作系统上安装一堆浏览器，并使用几乎每个浏览器中构建的开发人员工具来解决兼容性问题，或者涉及Web标准的不同实现。事实并非如此，因为蜂窝网络变得更快，手机变得更聪明，轻巧的“平板电脑”设备提供了另一种将人们连接到互联网的方式。这些（主要）在这些移动设备中进行调试是另一种游戏，并且存在多个不同的移动浏览器的事实并没有使工作变得更加容易。这是远程调试派上用场的地方。

钥匙要点

远程调试对于前端开发人员至关重要，这使确保所有平台上的兼容性和最佳性能的任务变得复杂。
在WebKit >上重用Web Inspector项目的用户界面代码，因此大多数前端开发人员都应该已经熟悉该工具箱。

>安装

在官方网站上记录了安装Weinre。它是一个node.js模块，因此您必须先安装该模块。在Mac OSX和Linux上，安装Node.js之后，安装与运行一样简单：

<span>sudo npm -g install weinre</span>

登录后复制

>文档在如何在Windows上使用Weinre并不那么清楚，因此我将在该过程的Windows端提供更多信息。您应该知道的第一件事是您的IP地址，因为访问Localhost上的页面或127.0.0.1不会做。您可以使用Linux上的IFCONFIG或Windows上的Mac OS和IPConfig在Windows上找到IP。静态IP地址对于使用Weinre的开发人员来说是理想的选择，否则您可能每次启动计算机都必须发现IP！如何从本地网络获得特定的IP地址超出了本文的范围，但这是Windows的指南，Mac OSX指南和Ubuntu。然后，您将需要HTTP服务器，因为您无法在移动设备上加载HTML文件（这就是为什么您必须知道计算机的IP地址！）。您可以使用node.js，apache，iis或中间人或jekyll等静态站点生成器 - 无论您最适合您的工作流程。还有一个RubyGem，为中间人添加了一种简单的助手方法。我将使用apache，并提供以下 - 不是特别有趣的静态html文件，并具有足够的样式可以远程检查：

>运行weinre

<span><span><!DOCTYPE html></span>
</span><span><span><span><html</span> lang<span>="en"</span>></span>
</span>
<span><span><span><head</span>></span>
</span>  <span><span><span><meta</span> charset<span>="utf-8"</span>></span>
</span>  <span><span><span><title</span>></span>WEb INspector REmote<span><span></title</span>></span>
</span>  <span><span><span><meta</span> name<span>="viewport"</span> content<span>="width=device-width, initial-scale=1"</span>></span>
</span>  <span><span><span><link</span> rel<span>="stylesheet"</span> href<span>="css/foundation.min.css"</span>></span>
</span>
  <span><span><span><style</span>></span><span>
</span></span><span><span>    <span><span>.flex-wrapper</span> {
</span></span></span><span><span>      <span>display: -webkit-box;
</span></span></span><span><span>      <span>display: -webkit-flex;
</span></span></span><span><span>      <span>display: -ms-flexbox;
</span></span></span><span><span>      <span>display: flex;
</span></span></span><span><span>      <span>-webkit-flex-wrap: wrap;
</span></span></span><span><span>          <span>-ms-flex-wrap: wrap;
</span></span></span><span><span>              <span>flex-wrap: wrap;
</span></span></span><span><span>    <span>}
</span></span></span><span><span>
</span></span><span><span>    <span><span>.flex-box</span> {
</span></span></span><span><span>      <span>-webkit-box-flex: 1;
</span></span></span><span><span>      <span>-webkit-flex: 1 1 30em;
</span></span></span><span><span>          <span>-ms-flex: 1 1 30em;
</span></span></span><span><span>              <span>flex: 1 1 30em;
</span></span></span><span><span>    <span>}
</span></span></span><span><span>  </span><span><span></style</span>></span>
</span><span><span><span></head</span>></span>
</span>
<span><span><span><body</span>></span>
</span>
<span><span><span><div</span> class<span>="wrapper"</span>></span>
</span>  <span><span><span><div</span> class<span>="row"</span>></span>
</span>    <span><span><span><div</span> class<span>="large-10 large-offset-1 column"</span>></span>
</span>      <span><span><span><h1</span>></span>Remote Debugging for Front-end Developers<span><span></h1</span>></span>
</span>
      <span><span><span><div</span> class<span>="flex-wrapper"</span>></span>
</span>        <span><span><span><div</span> class<span>="flex-box"</span>></span>
</span>          <span><span><span><p</span>></span>Front-end development used to be (kind of) easy.
</span>          One could easily install a bunch of browsers on a couple 
          of different computers / operating systems, physical 
          or virtual, and use the developer tools built in almost 
          every browser to solve compatibility problems, or work 
          around different implementations of web standards. 
          This is no longer the case, not since cellular networks 
          became faster, phones became smarter and light “tablet” 
          devices offered a new way to connect people to the internet 
          from wherever they are. Debugging in these (mostly) 
          mobile devices is a different kind of game, and the fact 
          that more than a dozen different mobile browsers 
          exist is not making the job any easier.<span><span><span></p</span>></span>
</span>        <span><span><span></div</span>></span>
</span>        <span><span><span><div</span> class<span>="flex-box"</span>></span>
</span>          <span><span><span><blockquote</span> cite<span>="http://people.apache.org/~pmuellr/weinre/docs/latest/Home.html"</span>></span>
</span>            <span><span><span><p</span>></span>weinre is WEb INspector REmote. Pronounced like
</span>            the word “winery”. Or maybe like the word “weiner”. Who 
            knows, really.<span><span><span></p</span>></span>
</span>          <span><span><span></blockquote</span>></span>
</span>          <span><span><span><p</span>></span>WEb INspector REmote was built to enable remote inspection 
</span>          and debugging of web pages across different devices. It’s a 
          useful tool, especially when you need to debug a ”UIWebView” 
          or Safari on iOS while developing on Linux or Windows. weinre 
          *reuses the user interface code from the Web Inspector project 
          at WebKit* so most front-end developers should already be  
          familiar with the toolbox.<span><span><span></p</span>></span>
</span>        <span><span><span></div</span>></span>
</span>      <span><span><span></div</span>></span>
</span>    <span><span><span></div</span>></span>
</span>  <span><span><span></div</span>></span>
</span><span><span><span></div</span>></span>
</span>
<span><span><span></body</span>></span>
</span><span><span><span></html</span>></span></span>

登录后复制

>如果您不想在每次运行时配置Weinre，则应在.Weinre目录中制作Server.properties文件。在您的个人资料目录中打开命令提示符（Windows用户：您

必须

>使用控制台用该名称制作一个文件夹！press win win r并键入“ cmd”或按“ Windows”键，键入几个来自“命令提示符”的字符，然后按Enter）并键入Mkdir .Weinre制作新目录。 Windows用户的最终路径应该是C：usersyyou_user_name.weinre。 >该文件夹准备就绪后，在名为server.properties中创建一个新的文本文件，并带有以下内容：>

如果被占用，请随时更改HTTPPORT。现在，您应该可以通过在命令提示符上输入Weinre来运行Weinre，Weinre Server将收听所选端口。在页面中添加以下行，您需要调试（或上述测试HTML文件我们提供的上述文件）：>

>启动您喜欢的基于WebKit的浏览器，然后键入Weinre Server的地址：http：// your_ip_address：8081/client/。这是您的调试器！现在，打开刚刚将脚本添加到智能手机/平板电脑，其他浏览器，计算机甚至虚拟OS/设备上的网页，这没有任何区别。您应该能够在Weinre调试器上看到此客户端，并使用这些开发工具来检查设备上的页面！您可以在任何DOM元素上查看（大多数）应用的CSS，添加，删除或更改内联样式，并在控制台中查看任何JavaScript消息。您还可以在控制台中运行JavaScript命令并操纵DOM。这应该足以帮助查明任何渲染错误或意外行为！

<span>boundHost:    -all-
</span><span>httpPort:     8081
</span><span>reuseAddr:    true
</span><span>readTimeout:  1
</span><span>deathTimeout: 5</span>

登录后复制

> weinre在动作

中

这是检查Android 4.1.2中默认浏览器的一个示例

我们可以使用JavaScript控制台更改文本颜色：>

以及其他任何JavaScript命令：> 前端开发人员的远程调试

>使用weinre

的应用程序

Prepros是一种工具，可以使用自动CSS前缀（用于跨浏览器测试和远程调试功能的内置服务器）进行较少的编译，Sass，Compass，Senlus，Jade等。它甚至可以工作跨平台！

>

VAINES是Firefox的一个附加组件，它使Firefox开发人员工具能够在iOS上远程检查 /调试基于壁虎的浏览器，Chrome和Safari。调试“ Target”可以是iOS设备或Chrome桌面浏览器（使用 - 记录 - 示波器 - port = 9222特殊“标志”以允许远程检查 - 请参阅Valence网站上的Chrome Desktop设置段落以获取说明）或Firefox OS。不幸的是，Valence无法检查Android设备模拟器或较旧的Android设备，但是可以检查iOS

>智能手机 /平板电脑必须物理连接到计算机，如果您使用的是Windows，则可能需要为设备安装USB驱动程序，这可能甚至可能存在！如果Windows用户需要检查iOS，也将必须安装iTunes。最后，必须启用开发人员模式>和/或

必须启用 - 请记住，完成工作后停用设置！目前，Valence相当有限，并且可以像早期的Beta那样不稳定，但这是一个有前途的工具。 >行动中的价 >检查Android 5智能手机上的Chrome浏览器的HTML源和样式：

可以检查任何站点： >将颜色属性添加到SVG路径，更改徽标：>

好的反应...谢谢您在下面为我留下控制台消息！

结论

上的任何CSS渲染不一致或不同的JavaScript行为>桌面浏览器相对容易 - 如今很少需要，因为大多数现代浏览器都会定期更新并支持大量的Web标准。但是移动

关于前端开发人员远程调试的常见问题

什么是远程调试，为什么对前端开发人员很重要？

远程调试是开发人员使用的一种方法来对代码进行故障排除和确定Web应用程序中的问题。它涉及将调试工具连接到远程系统，从而使开发人员可以控制和监视其在该系统上的代码执行。对于前端开发人员而言，这尤其重要，因为它允许他们在运行的实际环境中测试和调试代码。这可以帮助识别和解决在本地系统上测试时可能不会明显的问题。

>如何为我的Web应用程序设置远程调试？ Web应用程序涉及多个步骤。首先，您需要安装支持远程调试的调试工具。一些流行的选项包括Chrome DevTools，Safari Web检查员和Firefox开发人员工具。安装了调试工具后，您需要将其配置为连接到远程系统。这通常涉及输入远程系统的IP地址或主机名，并为要连接的调试工具指定端口号。建立连接后，您可以开始调试您的代码。

>使用远程调试可以识别和解决哪些常见问题？

远程调试可以帮助您识别广泛的范围Web应用程序中的问题。这些可能包括JavaScript错误，CSS样式问题，HTML标记错误和性能问题。通过逐步浏览您的代码并监视其在远程系统上的执行，您可以查明这些问题的确切位置和原因，从而更容易解决它们。

>我可以使用远程调试在不同的设备和浏览器上测试我的Web应用程序吗？

是的，可以使用远程调试来在不同的设备和浏览器上测试您的Web应用程序。这对于确保您的Web应用程序在您的用户可能使用的所有平台和浏览器上都能正常工作，这一点特别有用。通过将调试工具连接到远程设备或浏览器，您可以在用户将使用的相同环境中测试和调试代码。

如何使用Chrome DevTools进行远程调试？ 🎜> Chrome DevTools是用于远程调试的强大工具。要使用它，您首先需要在要调试的设备上启用远程调试。这可以通过在设备设置中导航到“开发人员选项”并启用“ USB调试”来完成。完成此操作后，使用USB电缆将设备连接到计算机。然后，您可以在计算机上打开Chrome Devtools，然后选择“远程设备”选项卡。从这里，您可以选择要调试的设备并启动新的调试会话。

>使用远程调试对传统调试方法有什么好处？

远程调试为您提供了比几个好处传统调试方法。它允许开发人员在将运行的实际环境中测试和调试其代码，这可以帮助识别在本地系统上测试时可能不明显的问题。它还允许开发人员在不同的设备和浏览器上测试他们的代码，确保其Web应用程序适用于所有用户。

我可以使用远程调试来调试JavaScript代码吗？调试可用于调试JavaScript代码。大多数现代调试工具，包括Chrome DevTools，Safari Web检查员和Firefox开发人员工具，都支持JavaScript调试。这使您可以逐步浏览JavaScript代码，设置断点和监视变量和表达式，全部来自本地系统。