Chrome 浏览器开发者工具介绍

•Télécharger en tant que PPTX, PDF•

3 j'aime•1,651 vues

huanghao39

介绍 Chrome 开发者工具的 DOM，CSS 和 Javascript 相关功能。

Technologie Business

右键菜单：审查元素 / Inspect element 快捷键：Ctrl + Shift + I打开开发者工具快捷键：Ctrl + Shift + J打开工具和命令行 4 启动开发者工具

编辑DOM节点属性(双击) 编辑 outerHTML(右键菜单 Edit as HTML) 实现动态插入节点删除节点 5 DOM操作

修改和添加样式 (style) 添加新的规则 (rule) 直接动态修改样式表文件多版本控制小功能(颜色模式) 6 样式表操作

用 ESC 键切换命令行窗口在命令行窗口中学习 Javascript 特性动态修改脚本，快速调试 7 脚本调试

$0 – 引用当前选中元素 var e = $0; 元素 – 显示元素DOM树 dir(元素) – 显示元素属性 (properties) inspect(元素) – 在文档树窗口中选中该元素 copy(文字) – 拷贝文字到剪贴板 8 脚本调试 – 控制台API (类似 Firebug)

开发工具本身就是一个 HTML 页面！远程调试参与开发 http://code.google.com/chrome/devtools/docs/contributing.html 11 深入到内部

Google Chrome Developer Tools http://code.google.com/chrome/devtools/ Chrome Developer Tools Cheatsheet http://smus.com/devtools-cheatsheet Google Chrome Developer Tools: 12 Tricks to Develop Quicker http://www.youtube.com/watch?v=nOEw9iiopwI How to contribute to Chrome Developer Tools http://code.google.com/chrome/devtools/docs/contributing.html 13 参考链接

Contenu connexe

En vedette

Content Methodology: A Best Practices Report (Webinar)

contently

How to Prepare For a Successful Job Search for 2024

Albert Qian

A report by thenetworkone and Kurio. The contributing experts and agencies are (in an alphabetical order): Sylwia Rytel, Social Media Supervisor, 180heartbeats + JUNG v MATT (PL), Sharlene Jenner, Vice President - Director of Engagement Strategy, Abelson Taylor (USA), Alex Casanovas, Digital Director, Atrevia (ES), Dora Beilin, Senior Social Strategist, Barrett Hoffher (USA), Min Seo, Campaign Director, Brand New Agency (KR), Deshé M. Gully, Associate Strategist, Day One Agency (USA), Francesca Trevisan, Strategist, Different (IT), Trevor Crossman, CX and Digital Transformation Director; Olivia Hussey, Strategic Planner; Simi Srinarula, Social Media Manager, The Hallway (AUS), James Hebbert, Managing Director, Hylink (CN / UK), Mundy Álvarez, Planning Director; Pedro Rojas, Social Media Manager; Pancho González, CCO, Inbrax (CH), Oana Oprea, Head of Digital Planning, Jam Session Agency (RO), Amy Bottrill, Social Account Director, Launch (UK), Gaby Arriaga, Founder, Leonardo1452 (MX), Shantesh S Row, Creative Director, Liwa (UAE), Rajesh Mehta, Chief Strategy Officer; Dhruv Gaur, Digital Planning Lead; Leonie Mergulhao, Account Supervisor - Social Media & PR, Medulla (IN), Aurelija Plioplytė, Head of Digital & Social, Not Perfect (LI), Daiana Khaidargaliyeva, Account Manager, Osaka Labs (UK / USA), Stefanie Söhnchen, Vice President Digital, PIABO Communications (DE), Elisabeth Winiartati, Managing Consultant, Head of Global Integrated Communications; Lydia Aprina, Account Manager, Integrated Marketing and Communications; Nita Prabowo, Account Manager, Integrated Marketing and Communications; Okhi, Web Developer, PNTR Group (ID), Kei Obusan, Insights Director; Daffi Ranandi, Insights Manager, Radarr (SG), Gautam Reghunath, Co-founder & CEO, Talented (IN), Donagh Humphreys, Head of Social and Digital Innovation, THINKHOUSE (IRE), Sarah Yim, Strategy Director, Zulu Alpha Kilo (CA).

Social Media Marketing Trends 2024 // The Global Indie Insights

Kurio // The Social Media Age(ncy)

The search marketing landscape is evolving rapidly with new technologies, and professionals, like you, rely on innovative paid search strategies to meet changing demands. It’s important that you’re ready to implement new strategies in 2024. Check this out and learn the top trends in paid search advertising that are expected to gain traction, so you can drive higher ROI more efficiently in 2024. You’ll learn: - The latest trends in AI and automation, and what this means for an evolving paid search ecosystem. - New developments in privacy and data regulation. - Emerging ad formats that are expected to make an impact next year. Watch Sreekant Lanka from iQuanti and Irina Klein from OneMain Financial as they dive into the future of paid search and explore the trends, strategies, and technologies that will shape the search marketing landscape. If you’re looking to assess your paid search strategy and design an industry-aligned plan for 2024, then this webinar is for you.

Trends In Paid Search: Navigating The Digital Landscape In 2024

Search Engine Journal

From their humble beginnings in 1984, TED has grown into the world’s most powerful amplifier for speakers and thought-leaders to share their ideas. They have over 2,400 filmed talks (not including the 30,000+ TEDx videos) freely available online, and have hosted over 17,500 events around the world. With over one billion views in a year, it’s no wonder that so many speakers are looking to TED for ideas on how to share their message more effectively. The article “5 Public-Speaking Tips TED Gives Its Speakers”, by Carmine Gallo for Forbes, gives speakers five practical ways to connect with their audience, and effectively share their ideas on stage. Whether you are gearing up to get on a TED stage yourself, or just want to master the skills that so many of their speakers possess, these tips and quotes from Chris Anderson, the TED Talks Curator, will encourage you to make the most impactful impression on your audience. See the full article and more summaries like this on SpeakerHub here: https://speakerhub.com/blog/5-presentation-tips-ted-gives-its-speakers See the original article on Forbes here: http://www.forbes.com/forbes/welcome/?toURL=http://www.forbes.com/sites/carminegallo/2016/05/06/5-public-speaking-tips-ted-gives-its-speakers/&refURL=&referrer=#5c07a8221d9b

5 Public speaking tips from TED - Visualized summary

SpeakerHub

Everyone is in agreement that ChatGPT (and other generative AI tools) will shape the future of work. Yet there is little consensus on exactly how, when, and to what extent this technology will change our world. Businesses that extract maximum value from ChatGPT will use it as a collaborative tool for everything from brainstorming to technical maintenance. For individuals, now is the time to pinpoint the skills the future professional will need to thrive in the AI age. Check out this presentation to understand what ChatGPT is, how it will shape the future of work, and how you can prepare to take advantage.

ChatGPT and the Future of Work - Clark Boyd

Clark Boyd

Getting into the tech field. what next

Tessa Mero

Google's Just Not That Into You: Understanding Core Updates & Search Intent

Lily Ray

How to have difficult conversations

Rajiv Jayarajah, MAppComm, ACC

Introduction to Data Science

Christy Abraham Joy

Time Management & Productivity - Best Practices

Vit Horky

The six step guide to practical project management If you think managing projects is too difficult, think again. We’ve stripped back project management processes to the basics – to make it quicker and easier, without sacrificing the vital ingredients for success. “If you’re looking for some real-world guidance, then The Six Step Guide to Practical Project Management will help.” Dr Andrew Makar, Tactical Project Management

The six step guide to practical project management

MindGenius

Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...

RachelPearson36

During this webinar, Anand Bagmar demonstrates how AI tools such as ChatGPT can be applied to various stages of the software development life cycle (SDLC) using an eCommerce application case study. Find the on-demand recording and more info at https://applitools.info/b59 Key takeaways: • Learn how to use ChatGPT to add AI power to your testing and test automation • Understand the limitations of the technology and where human expertise is crucial • Gain insight into different AI-based tools • Adopt AI-based tools to stay relevant and optimize work for developers and testers * ChatGPT and OpenAI belong to OpenAI, L.L.C.

Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...

Applitools

12 Ways to Increase Your Influence at Work

GetSmarter

ChatGPT webinar slides

Alireza Esmikhani

More than Just Lines on a Map: Best Practices for U.S Bike Routes

Project for Public Spaces & National Center for Biking and Walking

Has your project been caught in a storm of deadlines, clashing requirements, and the need to change course halfway through? If yes, then check out how the administration team navigated through all of this, relocating 160 people from 3 countries and opening 2 offices during the most turbulent time in the last 20 years. Belka Games’ Chief Administrative Officer, Katerina Rudko, will share universal approaches and life hacks that can help your project survive unstable periods when there seem to be too many tasks and a lack of time and people.

Ride the Storm: Navigating Through Unstable Periods / Katerina Rudko (Belka G...

DevGAMM Conference

Barbie - Brand Strategy Presentation

Erica Santiago

According to the latest State of the American Manager report from Gallup, employees who have regular meetings with their managers are almost three times as likely to be engaged as those who don’t. These regular check-ins keep managers and employees in sync and aligned. Want to see better manager/employee relationships in your organisation? Then make an all-in commitment to 1:1 meetings. Not sure how? You’ve come to the right place. In this webinar with Jamie Resker, Founder and Practice Leader for Employee Performance Solutions (EPS), and Teala Wilson, Talent Management Consultant at Saba Software, you’ll get the inside track on how to hold effective 1:1 meetings, including tips for getting managers on board. • Go beyond discussing the status of everyday work to higher level topics, including recognition, performance, development, and career aspirations • Learn how to decide meeting frequency, what to cover, as well as roles and responsibilities of the manager and employee • Understand how managers can build trust and make it comfortable for employees to provide upward feedback • Unite your organisation with a unified approach to 1:1 meetings Join us for this 1-hour webinar to get practical tips for building better manager-employee relationships with intention and purpose. About the Speakers Jamie Resker - Founder and Practice Leader for Employee Performance Solutions (EPS) Jamie Resker, Practice Leader and Founder of Employee Performance Solutions, is a recognized innovator in performance management. She is the originator of the-the Performance Continuum Feedback Method® and Conversations to Optimize Employee Performance training program; tools and training that reshape communications between managers and employees to drive and align performance. Jamie is on the faculty for the Northeast Human Resources Association, is a contributor to Halogen Software's Talent Space Blog, and is an editorial advisory board member for HR Examiner. Teala Wilson - Senior Consultant, Strategic Services, Saba Software Teala is a Talent Management Consultant at Halogen Software, now a part of Saba Software. She has worked with teams on a national and global level supporting human resources in areas such as performance management, recruitment, employee benefit programs, training and talent development, workforce planning and internal communications. Teala also has a personal passion for visual arts and design. Want to learn more? Join us for an upcoming Product Tour! http://bit.ly/2yitfqu

Good Stuff Happens in 1:1 Meetings: Why you need them and how to do them well

Saba Software

En vedette (20)

Content Methodology: A Best Practices Report (Webinar)

How to Prepare For a Successful Job Search for 2024

Social Media Marketing Trends 2024 // The Global Indie Insights

Trends In Paid Search: Navigating The Digital Landscape In 2024

5 Public speaking tips from TED - Visualized summary

ChatGPT and the Future of Work - Clark Boyd

Getting into the tech field. what next

Google's Just Not That Into You: Understanding Core Updates & Search Intent

How to have difficult conversations

Introduction to Data Science

Time Management & Productivity - Best Practices

The six step guide to practical project management

Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...

Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...

12 Ways to Increase Your Influence at Work

ChatGPT webinar slides

More than Just Lines on a Map: Best Practices for U.S Bike Routes

Ride the Storm: Navigating Through Unstable Periods / Katerina Rudko (Belka G...

Barbie - Brand Strategy Presentation

Good Stuff Happens in 1:1 Meetings: Why you need them and how to do them well

Chrome 浏览器开发者工具介绍

1. ChRome 浏览器开发者工具介绍黄昊 2011/6/25 1

2. DOM操作样式表操作脚本调试快捷键目录 2

3. 3 讨论对象 – Chrome 12 12.0.xxx

4. 右键菜单：审查元素 / Inspect element 快捷键：Ctrl + Shift + I打开开发者工具快捷键：Ctrl + Shift + J打开工具和命令行 4 启动开发者工具

5. 编辑DOM节点属性(双击) 编辑 outerHTML(右键菜单 Edit as HTML) 实现动态插入节点删除节点 5 DOM操作

6. 修改和添加样式 (style) 添加新的规则 (rule) 直接动态修改样式表文件多版本控制小功能(颜色模式) 6 样式表操作

7. 用 ESC 键切换命令行窗口在命令行窗口中学习 Javascript 特性动态修改脚本，快速调试 7 脚本调试

8. $0 – 引用当前选中元素 var e = $0; 元素 – 显示元素DOM树 dir(元素) – 显示元素属性 (properties) inspect(元素) – 在文档树窗口中选中该元素 copy(文字) – 拷贝文字到剪贴板 8 脚本调试 – 控制台API (类似 Firebug)

9. 格式化混淆过后的脚本！研究别人的代码 9 脚本调试 – 反混淆

10. 10 快捷键

11. 开发工具本身就是一个 HTML 页面！远程调试参与开发 http://code.google.com/chrome/devtools/docs/contributing.html 11 深入到内部

12. 12 远程调试截图

13. Google Chrome Developer Tools http://code.google.com/chrome/devtools/ Chrome Developer Tools Cheatsheet http://smus.com/devtools-cheatsheet Google Chrome Developer Tools: 12 Tricks to Develop Quicker http://www.youtube.com/watch?v=nOEw9iiopwI How to contribute to Chrome Developer Tools http://code.google.com/chrome/devtools/docs/contributing.html 13 参考链接

Chrome 浏览器开发者工具介绍

Recommandé

Recommandé

Contenu connexe

En vedette

En vedette (20)

Chrome 浏览器开发者工具介绍