Chrome mac

Console面板

1、运行JavaScript代码,交互式编程
2、查看程序中打印的Log日志
3、断点调试代码Debugging

// 查看cookie
document.cookie

// 选择元素
document.querySelectorAll("img")


// shift + enter 换行不执行

// 斐波那契

var fibo = function(n){
    return n<3 ? 1 : fibo(n-1) + fibo(n-2); 
}

Console打印Log日志

// 1、信息 ,支持多个参数
console.log("hello", ", ", "world")
// hello ,  world

// 变量替换
var s = "hi";
console.log("%s hello", s);
// hi hello

// 2、警告 
console.warn()

// 3、错误 
console.error()

// 4、表格形式打印json 
console.table({name: "tom"})

// 5、group信息组
console.group("start");
console.log("log");
console.info("info");
console.groupEnd("start");

// 6、自定义样式
console.log("%c这是绿色的日志", "color: green")

document.querySelector("#log").addEventListener("click",()=>{
    console.log("log");
})

// 断言
console.assert(1===2)


// 运行时间
console.time()
// do something
console.timeEnd()

// 清屏
console.clear()

调试JavaScrip基本流程

1、console.log() 或者 alert() 运行时调试
2、JavaScript断点调试
3、运行时变量调试,修改源代码临时保存调试

(1)debugger
(2)事件断点
(3)源代码断点

<html>

<body>
    <!-- 计算器实例 -->
    <input type="text">
    <input type="text">
    <button>计算</button>
    <p></p>

    <script>
        // 选取button元素
        var button = document.querySelector("button");

        // 添加按钮点击事件
        button.addEventListener("click", () => {
            var inputs = document.querySelectorAll("input");

            let a = parseInt(inputs[0].value);
            let b = parseInt(inputs[1].value);

            document.querySelector("p").textContent = a + b;
        })
    </script>
</body>

</html>

Snippets

// 添加jQuery
let script = document.createElement("script");
script.src="https://code.jquery.com/jquery-3.4.1.js";

// 防止 CDN 篡改 javascript
script.integrity = "sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=";

// 会发起一个跨域请求(即包含Origin: HTTP头)。
// 但不会发送任何认证信息(即不发送cookie, X.509证书和HTTP基本认证信息)。
// 如果服务器没有给出源站凭证(不设置Access-Control-Allow-Origin: HTTP头),这张图片就会被污染并限制使用。 
script.crossOrigin = "anonymous";

document.head.appendChild(script);

Application客户端存储

1、Cookies
添加cookie
document.cookie="a=2"

获取cookie
document.cookie
https://www.runoob.com/js/js-cookies.html

2、LocalStorage 永久存储
LocalStorage.getItem("key")
LocalStorage.setItem("key", "value")

3、SessionStorage 临时存储
sessionStorage.setItem("key", "value")
sessionStorage.getItem("key")

其他

网页截屏
comamnd + shifit +p
搜索 Capture full size screenshot

移动端开发调试
Sensors
NetWork conditions