在移动浏览器中测试 Javascript

Posted 2023-03-14

技术标签:

【中文标题】在移动浏览器中测试 Javascript【英文标题】：Test Javascript in mobile browser 【发布时间】：2017-01-20 07:41:01 【问题描述】：

我编写了一个纯 javascript 代码，可以在不同的桌面和移动设备上运行。

对于桌面，我可以打开浏览器控制台并测试我的 JavaScript 代码。但是我如何测试移动设备。我的代码在移动设备上大多失败，当我检查用户代理时我能够弄清楚。

这是一段简单的代码，用于从网页中提取字数。

function countWords() 
    try 
        if (top.document && top.document.querySelector("body")) 
            var _body = top.document.querySelector("body");
            var words =  _body.textContent || _body.innerText; //For old firefox, innerText does not work
    
            if (words) 
                words = words.replace(/\n/g,'');
                var filteredWords = words.match(/\S+/g);
                if (filteredWords && filteredWords.length > 0) 
                    userDetail.wordCount = filteredWords.length;
                
            
        
     catch (err) 
        processError("countWords", err);

此代码不适用于移动设备。

【问题讨论】：

我要做的第一件事是，看看 jasmine 或 mocha 他们正在测试框架，会解决你的很多 JS 问题。其次，对于 OSX，你需要一个 mac，但你可以在调试模式下运行连接到它的设备并获取控制台日志。 【参考方案1】：

如上所述，您可以使用 mac 和 ios 设备，如果您想走这条路，另一个选项是远程调试 android - https://developers.google.com/web/tools/chrome-devtools/remote-debugging/

它非常方便，更容易上手

【讨论】：

我已经知道远程调试了。在远程调试的情况下，打开的检查选项卡位于 Desktop chrome 中。我们不知道 Mobile 支持哪些类型的功能。我专注于移动。【参考方案2】：

要调试 Javascript 代码（或者只是一般的浏览器的东西）你需要 OS X 和 iOS 设备（你应该可以用 iOS 模拟器做同样的事情，但我无法让它工作，我主要使用设备来调试东西，所以没有费心去弄清楚）。有一项功能可以将 Web 检查器附加到 iOS 设备中的浏览器窗口。

启用它：

设备 -> 设置 -> Safari -> 高级 -> 启用 Web Inspector OS X -> Safari -> 开发（顶部栏）-> 从下拉菜单中选择您的设备 -> 选择运行 JS 代码的应用程序。

如果一切正常，网络检查器应该会出现。从那里你应该能够调试你的 JS 代码。

编辑：

这用于调试 iOS 设备（如果您想支持移动 Webkit，则很有用）。

【讨论】：

【参考方案3】：

您实际上可以在移动设备上打开 Console/Inspect 元素！

你需要“chrome”才能让它工作。

javascript:(function ()  var script = document.createElement('script'); script.src="//cdn.jsdelivr.net/npm/eruda"; document.body.appendChild(script); script.onload = function ()  eruda.init()  )();

只需创建一个新书签并将其命名为您想要的任何名称，在 url 部分输入上面的?代码就可以了！！

现在，当您想在移动浏览器中访问控制台时，点击地址栏并搜索我们刚刚创建的书签。

假设我们将其命名为“Inspect Element”，如果我们在地址栏输入“Inspect Element”，我们的书签就会出现，点击它运行 javascript，几秒钟后你的“控制台切换按钮”应该会出现单击它以访问移动浏览器上的控制台/检查元素。

好的，让我给你一个详细的分步过程。

•创建一个新书签。

•点击右上角的三点按钮，点击侧边栏右上角的“星号”按钮，新建书签。

•在 url 部分粘贴 javascript 代码后点击返回按钮并在地址栏中搜索 Inspect 元素。

•单击 Inspect Element 书签运行 javascript，您可以在浏览器中看到控制台切换按钮。

•点击它打开控制台！

•您可以在任何您想要的网站中启用控制台。

•只需转到网站并点击地址栏并搜索 Inspect Element 并按下它，控制台切换按钮就会出现。

•我希望这对某人有所帮助，如果有，请随时支持☺️。