Devtools(1)打开和快捷键 |
您所在的位置：网站首页 › 打开设置面板快捷键怎么设置 › Devtools(1)打开和快捷键 |
Devtools(1)打开和快捷键
|
文章目录
打开方式命令菜单和快捷键
关于Chrome的开发工具的使用.
主要组成面板(panel): ElementsConsoleSourcesNetworkPerformanceMemoryApplicationSecurityLighthouseRecorder 打开方式单击鼠标右键并点击检查. Control+Shift+c打开Element面板(c - css). F12. Control+Shift+j打开Console面板(j - javascript). 如果你之前已经打开过某个面板并将devtools关闭的话,可以通过Control+Shift+i再次打开. 鼠标点击Chrome的三个点->更多工具->开发者工具. 命令行通过chrome --auto-open-devtools-for-tabs命令(已经配置环境变量或者输入Chrome所在的路径)设置为每个页面自动打开开发者工具. 上面的命令要生效的话需要当前没有打开任何Chrome的实例且这种效果会持续到退出Chrome,而且之后打开的chrome实例都会有这种效果.(chrome --incognito可打开无痕模式) Mac的打开方式和上面一样(Control对应Command,Shift对应Option),以下的一些快捷键也是一样. 命令菜单和快捷键
打开之后应该是这样:
可输入查找命令并执行, 也可删除>并输入?查看更多选项:
快捷键(keyboard shortcuts): 全局快捷键(所有面板都可使用)局部快捷键(针对特定面板)全局: 作用MacWindows/Linux打开设置? or Function+F1?orF1移动到下一面板Cmd+]Ctrl+]移动到上一面板Cmd+[Ctrl+[选择devtools的位置(docking position)Cmd+Shift+DCtrl+Shift+D调整页面模式(移动端,pc端)Cmd+Shift+MCtrl+Shift+M审查页面元素Cmd+Shift+CCtrl+Shift+C打开命令菜单Cmd+Shift+PCtrl+Shift+P打开drawerescesc正常重新加载(Normal reload,使用之前已经加载过的一些文件重新渲染,缓存)Cmd+RF5orCtrl+RHard reload(不用缓存,重新加载一切)Cmd+Shift+RCtrl+F5orCtrl+Shift+R在当前面板查找文本(Audits,Application,Security面板不适用)Cmd+FCtrl+F在Drawer中打开search标签页Cmd+Option+FCtrl+Shift+F打开Sources面板中的文件Cmd+OorCmd+PCtrl+OorCtrl+O放大(Zoom in)Cmd+Shift++Ctrl+Shift++缩小(Zoom out)Cmd+-Ctrl+-使面板回到原来大小Cmd+0Ctrl+0运行代码片段(run snippet)Cmd+O打开命令菜单输入!再输入脚本的名称最后按回车同左Elements面板快捷键: 作用MacWindowsundoCmd+ZCtrl+ZredoCmd+Shift+ZCtrl+Z选择当前已被选择的元素的上一个或下一个元素up arrow/down arrow同左展开当前选择的dom结点,如果已经展开则选择当前结点下的元素right arr同左和上面的相反left arr同左编辑当前结点enterenter通过enter进入编辑结点后切换另一个属性的编辑Tab/Shift+Tab同左隐藏当前选择的结点hh编辑页面的html(enter编辑的是属性)Function+F2F2Elements面板下的styles: 作用MacWin/Linux跳转到css源码某个属性对应的源码按Cmd鼠标左击css属性按Ctrl鼠标左击css属性切换RGBA,HSLA,Hex形式表示的颜色值按住Shift点击颜色所对应的方块同左属性值自增或自减0.1点击对应的值并按Option+uporOpt+down同左属性值自增或自减1upordown同左~10Shift+uporShift+down同左~100Cmd+uporCmd+downCtrl+uporCtrl+down切换degrees(deg),gradians(grad),radians(rad)表示的角度值按住Shift点击角度对应的方块同左角度++或–1点击角度对应的方块按upordown同左角度+=或-=10除了点击角度和上面属性值的快捷键一样同左Sources面板: 作用MacWin/Linux暂停脚本执行(如果正在运行)或恢复执行(如果已经暂停)F8orCmd+\同左如果要执行的代码是一个函数调用就直接执行整个函数不步入(Step over)F10orCmd+'同左步入函数(Step into)F11orCmd+;同左步出当前函数(Step out)Shift+F11orCmd+shift+;同左Continue to a certain line of code while pausedHold Cmdand then click the line of code同左选择当前已选择的上一个/下一个栈帧Control+./Control+,Ctrl+./Ctrl+,save changes to local modificationsCmd+sCtrl+ssave all changesCmd+Opt+SCtrl+Alt+S跳转到某一行Control+GControl+G跳转到某个函数(html,js)或规则集(css)Cmd+Shift+O然后键入要查找的关键字同左Close the active tabOpt+WAlt+W代码编辑器快捷键: 作用MacWin/Linux在某行添加或移除断点光标移动到要添加或删除的行按Cmd+B同左括号匹配Control+MControl+M注释Cmd+/Control+/Select/de-select the next occurence of whatever word the cursor is on. Each occurrence is highlighted simultaneouslyCmd+D/Cmd+U同左Performance面板: actionMacWin/Linux开始/结束记录(recording)Cmd+ECtrl+E保存记录Cmd+SCtrl+S加载记录Cmd+OCtrl+OMemory面板: 开始/结束记录:Ctrl+E. Console面板: ActionMacWin/Linux自动补全Taborright arr同左取消自动补全escesc清除控制台Cmd+KorOpt+LCtrl+Lfocus the consoleControl+反引号Ctrl+反引号切换之前输入过的代码up arr /down arr同左输入多行代码Command+RetureShift+Enter一个对象被输出到控制台后展开该对象的所有属性按住Alt点击小三角形同左也是Alt翻译自: https://developer.chrome.com/docs/devtools/shortcuts/ |
【本文地址】
今日新闻 |
推荐新闻 |