在这里可以通过创造被动收入颠覆八小时工作制,最终实现财务自由。

谷歌浏览器前端开发的调试技巧

今日限免 JackLeon 4个月前 (12-06) 200次浏览 0个评论 扫描二维码
文章目录[隐藏]

痛点描述:CHROME DEVTOOLS 提供了一套惊人的工具来帮助您在 WEB 平台上进行开发。以下是您可能还不知道的一些技巧:


谷歌浏览器前端开发的调试技巧

在“元素”面板中拖放

在“元素”面板中,您可以拖放任何 HTML 元素并更改其在整个页面中的位置
谷歌浏览器前端开发的调试技巧

引用控制台中当前选定的元素

在“元素”面板中选择一个节点,然后$0在控制台中键入以引用它。
谷歌浏览器前端开发的调试技巧

提示:如果您使用的是 jQuery,则可以输入$($0)以访问此元素上的 jQuery API。

使用控制台中最后一个操作的值

使用$_引用在控制台执行的前一操作的返回值
谷歌浏览器前端开发的调试技巧

添加 CSS 并编辑元素状态

在“元素”面板中,有 2 个超级有用的按钮。
第一个允许您添加一个新的 CSS 属性,使用您想要的任何选择器,但预先填充当前选定的元素:
谷歌浏览器前端开发的调试技巧
第二个允许您触发所选元素的状态,因此您可以看到在焦点上激活,悬停和应用的样式。
谷歌浏览器前端开发的调试技巧

查找定义 CSS 属性的位置

cmd-clickctrl-click在 Windows 上)“元素”面板中的 CSS 属性,DevTools 将指向“源”面板中定义的位置
谷歌浏览器前端开发的调试技巧

保存到修改后的 CSS 文件

单击您编辑的 CSS 文件的名称。检查员将其打开到“源”窗格中,然后您可以使用所应用的实时编辑将其保存。
此技巧不适用于使用+或添加到 element.style 属性的新选择器,但仅适用于已修改的现有属性。
谷歌浏览器前端开发的调试技巧

屏幕截图单个元素

选择一个元素并按cmd-shift-p(或ctrl-shift-p在 Windows 中)打开命令菜单,然后选择捕获节点屏幕截图
谷歌浏览器前端开发的调试技巧

使用 CSS 选择器查找元素

cmd-fctrl-f在 Windows 中)将打开“元素”面板中的搜索框。
您可以在其中键入任何字符串以匹配源代码,或者您也可以使用 CSS 选择器让 Chrome 为您生成图像:
谷歌浏览器前端开发的调试技巧

按住 SHIFT 键进入控制台

要在控制台中编写跨越多行的命令,请按shift-enter
准备好后,按脚本末尾的 Enter 键执行:
谷歌浏览器前端开发的调试技巧

清除控制台

您可以使用控制台左上角的“ 清除”按钮清除控制台,或按ctrl-lcmd-k

在“来源”面板中:

  • cmd-octrl-o在 Windows 中),显示页面加载的所有文件。
  • cmd-shift-octrl-shift-o在 Windows 中)显示当前文件中的符号(属性,函数,类)。
  • ctrl-g 去特定的路线。

谷歌浏览器前端开发的调试技巧

监视表达式

而不是一次又一次地写一个变量名或表达式,你将在调试会话期间检查很多,将它添加到监视表达式列表中。
谷歌浏览器前端开发的调试技巧

XHR / FETCH 调试

从调试器中打开XHR / Fetch Breakpoints面板。
您可以在发送XHR / Fetch调用时将其设置为中断,或者仅在特定的调用时设置:
谷歌浏览器前端开发的调试技巧

调试 DOM 修改

右键单击一个元素并启用Break on Subtree Modifications:只要脚本遍历该元素子元素并修改它们,调试器就会自动停止,以便您检查发生了什么。
谷歌浏览器前端开发的调试技巧


创享视界 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:谷歌浏览器前端开发的调试技巧
喜欢 (0)
[1186664388@qq.com]
分享 (0)
关于作者:
创享视界(creativeview.cn)是一个带动全民颠覆八小时工作制,通过投稿把自己的创意智慧变现的方式创造被动收入,从而实现财务自由的平台。我们相信,创新思维不仅有助于打造更出色的产品,还可以让世界变得更美好,让人人受益。
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
%d 博主赞过: