方法/步骤

  1.  chrome浏览器早期版本的操作方法与我现在要讲的方法有所不同，因此操作前请注意浏览器的版本号。

    示例中的版本号： 53.0.2785.116 m

  2.  任意打开一个需要调试的html文件
  3.  调出“Developer Tools”工具（ctrl+shift+i）
  4.  点击sources
  5.  选中调试文件，点击右键，Add folder to worspace
  6.  选择当前文件所在目录
  7.  

    这是浏览器会弹出警告，点击是。

  8.  这是关键性的一步，具体操作看下图（map to network resource）
  9.  映射对应文件
  10.  调试网页，刷新网页，发现修改后的结果被保存，至此配置成功！

注意事项

  • 注意浏览器的版本
  • css,js文件必须与html文件分离，即不能写html文件内，否则不生效。

让谷歌浏览器（chrome）保存调试代码workspace的更多相关文章

  1. chrome单步调试代码

    单步调试代码 所有步骤选项均通过边栏中的可点击图标 表示,但也可以通过快捷键触发(鼠标悬停在操作图标上就可以看到快捷键).下面是简要介绍: 图标/按钮 操作 描述 Resume 继续执行直到下一个断点 ...

  2. 如何在sublime+chrome中调试php代码？

    1.搭建php本地运行环境具体点击如何使用phpstudy本地搭建多站点(每个站点对应不同的端口) 2.下载php_xdebug.dll, [5.3版以上的php下载地址]http://pecl.ph ...

  3. chrome浏览器调试JS代码

    是怎么调试 JavaScript 程序的?最原始的方法是用 alert() 在页面上打印内容,稍微改进一点的方法是用 console.log() 在 JavaScript 控制台上输出内容.嗯~,用这 ...

  4. android：如何通过chrome远程调试APP中的webView的h5代码

    今天出现一个问题,在老板的Mate9 Pro上,我们APP的所有H5页面都是一片空白,但是在其他手机上都是好的,那么我们就怀疑是h5报错了,但是到底是什么错,无法得知,所以就想要可以像在pc的chro ...

  5. 谷歌浏览器chrome://inspect/#devices调试webview的页面和控制台布局错乱问题

    谷歌浏览器chrome://inspect/#devices调试webview的页面和控制台布局错乱问题 : 谷歌浏览器的版本过高,选择60版本即可: 版本 60.0.3080.5(正式版本)

  6. vscode(Visual Studio Code)中安装Debugger for Chrome插件调试页面

    最近换了下编辑器,改用vscode(Visual Studio Code),很喜欢它左边显示的文件路径,轻松新建文件夹和文件,也喜欢它的编码转换功能,gbk和utf-8可以随时切换,因为公司网站有些页 ...

  7. WebView 与PC机Chrome配合调试

    参考自http://www.cnblogs.com/terrylin/p/4606277.html 移动端WebView开发调试:Chrome远程调试 Chrome DevTools调试移动设备Bro ...

  8. PHPStorm+Wamp+Xdebug+Windows7调试代码

    Wamp 集成环境 PHPStorm+Xdebug 调试代码 2013.04.16 花了两个小时时间终于 , 配置成功了 ! 我的开发环境如下 , 其它环境也可以参考我的配置 开发环境 : Windo ...

  9. Chrome 实用调试技巧

    Chrome 实用调试技巧 2016-07-23 如今Chrome浏览器无疑是最受前端青睐的工具,原因除了界面简洁.大量的应用插件,良好的代码规范支持.强大的V8解释器之外,还因为Chrome开发者工 ...

随机推荐

  1. 当点阵字库遇到3D

    早在遥远的DOS时代,点阵汉字库为计算机处理汉字起到了关键作用.当时的显示器在图形模式下的分辨率只有640x480甚至320x200,显示汉字直接使用点阵字库在屏幕上打点就可以了.如今的电脑屏幕甚至手 ...

  2. spring 中属性scope 的prototype(有状态)和singleton(无状态)

    默认情况下,从bean工厂所取得的实例为Singleton(bean的singleton属性) Singleton: Spring容器只存在一个共享的bean实例, 默认的配置. Prototype: ...

  3. css 实现鼠标滑过流光效果

    来划我啊 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <titl ...

  4. 折线分割平面(hdoj 2050,动态规划递推)

    Problem Description 我们看到过很多直线分割平面的题目,今天的这个题目稍微有些变化,我们要求的是n条折线分割平面的最大数目.比如,一条折线可以将平面分成两部分,两条折线最多可以将平面 ...

  5. ROS lesson 1

    ROS ROS官网 ROS 简介 ROS 是 Robot Operation System 的简写,并且 他诞生在2000年后,至今有10余年了,运行在 Linux(Ubuntu) 上 ROS 不是 ...

  6. <Zookeeper>入门 概念

    分布式协调服务 Zookeeper 分布式环境的特点 1.分布性 基于一个硬件或者多个硬件设备以及多个软件组成的分布在不同网络计算机上的系统架构,通过消息传递进行通信协调.在空间上部署是可以任意的,网 ...

  7. Go：变量、常量、枚举

    一.变量 package main import "fmt" func variableZeroValue() { // 变量声明 var a int var b string f ...

  8. js获取昨天，最近7天，最近30天通用方法

    function formatDate (val) { // 格式化时间 let start = new Date(val) let y = start.getFullYear() let m = ( ...

  9. angular环境安装与配置

    1.安装npm和nodejs,下载地址:https://nodejs.org/en/download/ node -v npm -v   2.配置淘宝代理,下载node_modules npm con ...

  10. 威纶通 与 信捷XC\XD系列PLC 通讯

    第一次使用信捷XD系列PLC正式做个项目,用的触摸屏为威纶通的 MT6071iP (注意:下面内容同样适用于 信捷XC系列PLC ,除信捷XC与XD系列编程软件不一样,其余接线设置实测均一样 ) 目前 ...