معرفی بهترین ابزارهای طراحی سایت | جدید ترین ابزارها - وبکده
وب سایت Stack Overflow یکی از پرکاربردترین ابزارهای طراحی سایت محسوب می‌شود ... وب سایت Pingdom Tools از دیگر ابزارهای کاربردی و مهم برای طراحی سایت ...
Chrome Developer Tools
مرورگر Chrome دارای بخشی به نام <anchor>Chrome Developer Tools</anchor> است که با مراجعه به این قسمت و استفاده از ابزارهای مختلف آن می‌توانید به کدهای مختلف سایت خود دسترسی پیدا کنید، خطاها را پیدا کرده و تغییرات لازم را نیز در آنها اعمال نمایید. برای دسترسی به این ابزار کاربردی تنها کافی است یک صفحه در مرورگر Chrome خود باز کرده و سپس با یک راست کلیک گزینه Inspect را انتخاب کنید تا پنل ابزارهای توسعه دهنده برایتان نمایش داده شود. حال در این صفحه می‌توانید علاوه بر خطایابی و تست کدها همچنین کدهای HTML و یا CSS را نیز بنویسید و تغییرات لازم را نیز در آنها ایجاد نمایید.
Chrome DevTools  |  Chrome for Developers
Chrome DevTools  \|  Chrome for Developers

[![Chrome for Developers](https://www.gstatic.com/devrel-devsite/prod/vff8c7d35de8ade382e79c3b9a923182d876d284b6ae43035fbefc80d49042a6e/chrome/images/lockup.svg)](/)

[Get inspired](https://developer.chrome.com/case-studies)[Blog](https://developer.chrome.com/blog)[Docs](https://developer.chrome.com/docs)

- Build with Chrome
- Learn how Chrome works, participate in origin trials, and build with Chrome everywhere.

- [Web Platform](https://developer.chrome.com/docs/web-platform)
- [Capabilities](https://developer.chrome.com/docs/capabilities)
- [ChromeDriver](https://developer.chrome.com/docs/chromedriver)
- [Extensions](https://developer.chrome.com/docs/extensions)
- [Chrome Web Store](https://developer.chrome.com/docs/webstore)
- [Chromium](https://developer.chrome.com/docs/chromium)
- [Aurora](https://developer.chrome.com/docs/aurora)
- [Web on Android](https://developer.chrome.com/docs/android)
- [Origin trials](https://developer.chrome.com/origintrials/)
- [Release notes](https://developer.chrome.com/release-notes)

- Productivity
- Create the best experience for your users with the web's best tools.
- [DevTools](https://developer.chrome.com/docs/devtools)
- [Lighthouse](https://developer.chrome.com/docs/lighthouse)
- [Chrome UX Report](https://developer.chrome.com/docs/crux)
- [Accessibility](https://developer.chrome.com/docs/accessibility)

- Get things done quicker and neater, with our ready-made libraries.

- [Workbox](https://developer.chrome.com/docs/workbox)
- [Puppeteer](https://developer.chrome.com/docs/puppeteer)

- Experience
- Design a beautiful and performant web with Chrome.

- [AI](https://developer.chrome.com/docs/ai)
- [Performance](https://developer.chrome.com/docs/performance)
- [CSS and UI](https://developer.chrome.com/docs/css-ui)
- [Identity](https://developer.chrome.com/docs/identity)
- [Payments](https://developer.chrome.com/docs/payments)
- [Privacy and security](https://developer.chrome.com/docs/privacy-security)

- Resources
- More from the Chrome team.

- [All documentation](https://developer.chrome.com/docs)
- [Baseline](https://web.dev/baseline)
- [web.dev](https://web.dev)

[New in Chrome](https://developer.chrome.com/new)

`/`

- English
- Deutsch
- Español – América Latina
- Français
- Indonesia
- Italiano
- Nederlands
- Polski
- Português – Brasil
- Tiếng Việt
- Türkçe
- Русский
- עברית
- العربيّة
- فارسی
- हिंदी
- বাংলা
- ภาษาไทย
- 中文 – 简体
- 中文 – 繁體
- 日本語
- 한국어

Sign in

- [Chrome DevTools](https://developer.chrome.com/docs/devtools)

[DevTools](https://developer.chrome.com/docs/devtools)[Panels](https://developer.chrome.com/docs/devtools/dom)

- [Elements](https://developer.chrome.com/docs/devtools/elements)
- [Console](https://developer.chrome.com/docs/devtools/console)
- [Sources](https://developer.chrome.com/docs/devtools/sources)
- [Network](https://developer.chrome.com/docs/devtools/network/overview)
- [Performance](https://developer.chrome.com/docs/devtools/performance/overview)
- [Memory](https://developer.chrome.com/docs/devtools/memory)
- [Application](https://developer.chrome.com/docs/devtools/application)
- [Recorder](https://developer.chrome.com/docs/devtools/recorder/overview)
- [Rendering](https://developer.chrome.com/docs/devtools/rendering)

[More panels](https://developer.chrome.com/docs/devtools/security)

- [Autofill](https://developer.chrome.com/docs/devtools/autofill)
- [Animations](https://developer.chrome.com/docs/devtools/css/animations)
- [Changes](https://developer.chrome.com/docs/devtools/changes)
- [Coverage](https://developer.chrome.com/docs/devtools/coverage)
- [Developer resources](https://developer.chrome.com/docs/devtools/developer-resources)
- [CSS overview](https://developer.chrome.com/docs/devtools/css-overview)
- [Issues](https://developer.chrome.com/docs/devtools/issues)
- [Lighthouse](https://developer.chrome.com/docs/devtools/lighthouse)
- [Media](https://developer.chrome.com/docs/devtools/media-panel)
- [Memory Inspector](https://developer.chrome.com/docs/devtools/memory-inspector)
- [Network conditions](https://developer.chrome.com/docs/devtools/device-mode/override-user-agent)
- [Network request blocking](https://developer.chrome.com/docs/devtools/network-request-blocking)
- [Performance monitor](https://developer.chrome.com/docs/devtools/performance-monitor)
- [Protocol monitor](https://developer.chrome.com/docs/devtools/protocol-monitor)
- [Quick source](https://developer.chrome.com/docs/devtools/quick-source)
- [Security](https://developer.chrome.com/docs/devtools/security)
- [Sensors](https://developer.chrome.com/docs/devtools/sensors)
- [WebAudio](https://developer.chrome.com/docs/devtools/webaudio)
- [WebAuthn](https://developer.chrome.com/docs/devtools/webauthn)
- [What's new](https://developer.chrome.com/docs/devtools/whats-new)

[Settings](https://developer.chrome.com/docs/devtools/settings)[Accessibility](https://developer.chrome.com/docs/devtools/accessibility/reference)

[![Chrome for Developers](https://www.gstatic.com/devrel-devsite/prod/vff8c7d35de8ade382e79c3b9a923182d876d284b6ae43035fbefc80d49042a6e/chrome/images/lockup.svg)](/)

- [Get inspired](/case-studies)
- [Blog](/blog)
- [Docs](/docs)

  - More


  - [DevTools](/docs/devtools)
  - [Panels](/docs/devtools/dom)    - More
  - [More panels](/docs/devtools/security)    - More
  - [Settings](/docs/devtools/settings)
  - [Accessibility](/docs/devtools/accessibility/reference)
- [New in Chrome](/new)

- Build with Chrome

- [Web Platform](/docs/web-platform)
- [Capabilities](/docs/capabilities)
- [ChromeDriver](/docs/chromedriver)
- [Extensions](/docs/extensions)
- [Chrome Web Store](/docs/webstore)
- [Chromium](/docs/chromium)
- [Aurora](/docs/aurora)
- [Web on Android](/docs/android)
- [Origin trials](https://developer.chrome.com/origintrials/)
- [Release notes](/release-notes)
- Productivity

- [DevTools](/docs/devtools)
- [Lighthouse](/docs/lighthouse)
- [Chrome UX Report](/docs/crux)
- [Accessibility](/docs/accessibility)
- [Workbox](/docs/workbox)
- [Puppeteer](/docs/puppeteer)
- Experience

- [AI](/docs/ai)
- [Performance](/docs/performance)
- [CSS and UI](/docs/css-ui)
- [Identity](/docs/identity)
- [Payments](/docs/payments)
- [Privacy and security](/docs/privacy-security)
- Resources

- [All documentation](/docs)
- [Baseline](https://web.dev/baseline)
- [web.dev](https://web.dev)

- [Elements](/docs/devtools/elements)
- [Console](/docs/devtools/console)
- [Sources](/docs/devtools/sources)
- [Network](/docs/devtools/network/overview)
- [Performance](/docs/devtools/performance/overview)
- [Memory](/docs/devtools/memory)
- [Application](/docs/devtools/application)
- [Recorder](/docs/devtools/recorder/overview)
- [Rendering](/docs/devtools/rendering)

- [Autofill](/docs/devtools/autofill)
- [Animations](/docs/devtools/css/animations)
- [Changes](/docs/devtools/changes)
- [Coverage](/docs/devtools/coverage)
- [Developer resources](/docs/devtools/developer-resources)
- [CSS overview](/docs/devtools/css-overview)
- [Issues](/docs/devtools/issues)
- [Lighthouse](/docs/devtools/lighthouse)
- [Media](/docs/devtools/media-panel)
- [Memory Inspector](/docs/devtools/memory-inspector)
- [Network conditions](/docs/devtools/device-mode/override-user-agent)
- [Network request blocking](/docs/devtools/network-request-blocking)
- [Performance monitor](/docs/devtools/performance-monitor)
- [Protocol monitor](/docs/devtools/protocol-monitor)
- [Quick source](/docs/devtools/quick-source)
- [Security](/docs/devtools/security)
- [Sensors](/docs/devtools/sensors)
- [WebAudio](/docs/devtools/webaudio)
- [WebAuthn](/docs/devtools/webauthn)
- [What's new](/docs/devtools/whats-new)

- [Home](https://developer.chrome.com/)
- [Docs](https://developer.chrome.com/docs)
- [Chrome DevTools](https://developer.chrome.com/docs/devtools)


 Stay organized with collections


 Save and categorize content based on your preferences.


![](https://developer.chrome.com/static/docs/devtools/images/devtools-screenshot.png)

### DevTools

Chrome DevTools is a set of web developer tools built directly into the Google Chrome browser. DevTools lets you edit pages on-the-fly and diagnose problems quickly, which helps you build better websites, faster.



[Get started](https://developer.chrome.com/docs/devtools/overview)

### [Open DevTools](https://developer.chrome.com/docs/devtools/open)

All of the ways that you can open Chrome DevTools.



[article](https://developer.chrome.com/docs/devtools/news)

### [What's new in DevTools](https://developer.chrome.com/docs/devtools/news)

Stay up to date with the latest DevTools changes.



[video\_library](https://developer.chrome.com/docs/devtools/tips)

### [DevTools Tips](https://developer.chrome.com/docs/devtools/tips)

A series of bite-size videos to help you to learn features in DevTools.



## Commands and shortcuts

Quickly accomplish tasks.



### [Run commands in the command menu](https://developer.chrome.com/docs/devtools/command-menu)

Open the command menu, run commands, open files, see other actions, and more.



[Read the doc](https://developer.chrome.com/docs/devtools/command-menu)

### [Keyboard shortcuts](https://developer.chrome.com/docs/devtools/shortcuts)

A comprehensive reference of keyboard shortcuts.



[Read the doc](https://developer.chrome.com/docs/devtools/shortcuts)

### [Disable JavaScript](https://developer.chrome.com/docs/devtools/javascript/disable)

See how a web page looks and behaves when JavaScript is disabled.



[Read the doc](https://developer.chrome.com/docs/devtools/javascript/disable)

[article](https://developer.chrome.com/docs/devtools/device-mode)

### [Simulate mobile devices with device mode](https://developer.chrome.com/docs/devtools/device-mode)

Simulate devices to build mobile-first websites.



[article](https://developer.chrome.com/docs/devtools/search)

### [Search across loaded resources](https://developer.chrome.com/docs/devtools/search)

Find text across all loaded resources with the Search panel.



## Panels

Discover the power of each DevTools panel.



### [Elements - DOM](https://developer.chrome.com/docs/devtools/dom)

Learn how to view and change a page's DOM.



[Read the docs](https://developer.chrome.com/docs/devtools/dom)

### [Elements - CSS](https://developer.chrome.com/docs/devtools/css)

Learn how to view and change a page's CSS.



[Read the docs](https://developer.chrome.com/docs/devtools/css)

### [Console](https://developer.chrome.com/docs/devtools/console)

Log messages and run JavaScript.



[Read the docs](https://developer.chrome.com/docs/devtools/console)

### [Sources](https://developer.chrome.com/docs/devtools/sources)

View and edit files, create snippets, debug JavaScript, and set up a workspace.



[Read the docs](https://developer.chrome.com/docs/devtools/sources)

### [Network](https://developer.chrome.com/docs/devtools/network/overview)

Log network requests.



[Read the docs](https://developer.chrome.com/docs/devtools/network/overview)

### [Performance](https://developer.chrome.com/docs/devtools/performance/overview)

Evaluate website performance.



[Read the docs](https://developer.chrome.com/docs/devtools/performance/overview)

### [Memory](https://developer.chrome.com/docs/devtools/memory)

Find memory issues that affect page performance, including memory leaks, and more.



[Read the docs](https://developer.chrome.com/docs/devtools/memory)

### [Application](https://developer.chrome.com/docs/devtools/progressive-web-apps)

Inspect, modify, and debug web apps, test cache, view storage, and more.



[Read the docs](https://developer.chrome.com/docs/devtools/progressive-web-apps)

### [Recorder](https://developer.chrome.com/docs/devtools/recorder/overview)

Record, replay, measure user flows, and edit their steps.



[Read the docs](https://developer.chrome.com/docs/devtools/recorder/overview)

### [Rendering](https://developer.chrome.com/docs/devtools/rendering)

Discover a collection of options that affect web content rendering.



[Read the docs](https://developer.chrome.com/docs/devtools/rendering)

[article](https://developer.chrome.com/docs/devtools/autofill)

### [Autofill](https://developer.chrome.com/docs/devtools/autofill)

Inspect and debug saved addresses.



[article](https://developer.chrome.com/docs/devtools/issues)

### [Issues](https://developer.chrome.com/docs/devtools/issues)

Find and fix problems with your website.



[article](https://developer.chrome.com/docs/devtools/security)

### [Security](https://developer.chrome.com/docs/devtools/security)

Make sure that a page is fully protected by HTTPS.



[article](https://developer.chrome.com/docs/devtools/memory-inspector)

### [Memory inspector](https://developer.chrome.com/docs/devtools/memory-inspector)

Inspect an ArrayBuffer, TypedArray, or DataView in JavaScript, as well as WebAssembly and memory of C++ Wasm apps.



[article](https://developer.chrome.com/docs/devtools/device-mode/override-user-agent)

### [Network conditions](https://developer.chrome.com/docs/devtools/device-mode/override-user-agent)

Override the user agent string.



[article](https://developer.chrome.com/docs/devtools/network-request-blocking)

### [Network request blocking](https://developer.chrome.com/docs/devtools/network-request-blocking)

Test your site by blocking network requests.



[article](https://developer.chrome.com/docs/devtools/media-panel)

### [Media](https://developer.chrome.com/docs/devtools/media-panel)

View information and debug media players per browser tab.



[article](https://developer.chrome.com/docs/devtools/css/animations)

### [Animations](https://developer.chrome.com/docs/devtools/css/animations)

Inspect and modify animations.



[article](https://developer.chrome.com/docs/devtools/changes)

### [Changes](https://developer.chrome.com/docs/devtools/changes)

Track changes to HTML, CSS, and JavaScript.



[article](https://developer.chrome.com/docs/devtools/coverage)

### [Coverage](https://developer.chrome.com/docs/devtools/coverage)

Find and analyze unused JavaScript and CSS code.



[article](https://developer.chrome.com/docs/devtools/developer-resources)

### [Developer resources](https://developer.chrome.com/docs/devtools/developer-resources)

Check if source maps load successfully and load them manually.



[article](https://developer.chrome.com/docs/devtools/css-overview)

### [CSS Overview](https://developer.chrome.com/docs/devtools/css-overview)

Identify potential CSS improvements.



[article](https://developer.chrome.com/docs/devtools/lighthouse)

### [Lighthouse](https://developer.chrome.com/docs/devtools/lighthouse)

Optimize website speed with the Lighthouse panel.



[article](https://developer.chrome.com/docs/devtools/performance-insights)

### [Performance insights](https://developer.chrome.com/docs/devtools/performance-insights)

Get actionable insights on your website's performance.



[article](https://developer.chrome.com/docs/devtools/performance-monitor)

### [Performance monitor](https://developer.chrome.com/docs/devtools/performance-monitor)

Monitor load and runtime performance.



[article](https://developer.chrome.com/docs/devtools/quick-source)

### [Quick source](https://developer.chrome.com/docs/devtools/quick-source)

View and edit source files while having access to other panels.



[article](https://developer.chrome.com/docs/devtools/sensors)

### [Sensors](https://developer.chrome.com/docs/devtools/sensors)

Emulate device sensors.



[article](https://developer.chrome.com/docs/devtools/webaudio)

### [WebAudio](https://developer.chrome.com/docs/devtools/webaudio)

View WebAudio API metrics.



[article](https://developer.chrome.com/docs/devtools/webauthn)

### [WebAuthn](https://developer.chrome.com/docs/devtools/webauthn)

Emulate authenticators.



## Settings reference

[article](https://developer.chrome.com/docs/devtools/settings)

### [Overview](https://developer.chrome.com/docs/devtools/settings)

[article](https://developer.chrome.com/docs/devtools/settings/preferences)

### [Preferences](https://developer.chrome.com/docs/devtools/settings/preferences)

[article](https://developer.chrome.com/docs/devtools/settings/workspace)

### [Workspace](https://developer.chrome.com/docs/devtools/settings/workspace)

[article](https://developer.chrome.com/docs/devtools/settings/preferences)

### [Experiments](https://developer.chrome.com/docs/devtools/settings/preferences)

[article](https://developer.chrome.com/docs/devtools/settings/experiments)

### [Ignore list](https://developer.chrome.com/docs/devtools/settings/experiments)

[article](https://developer.chrome.com/docs/devtools/settings/devices)

### [Devices](https://developer.chrome.com/docs/devtools/settings/devices)

[article](https://developer.chrome.com/docs/devtools/settings/throttling)

### [Throttling](https://developer.chrome.com/docs/devtools/settings/throttling)

[article](https://developer.chrome.com/docs/devtools/settings/locations)

### [Locations](https://developer.chrome.com/docs/devtools/settings/locations)

[article](https://developer.chrome.com/docs/devtools/settings/shortcuts)

### [Shortcuts](https://developer.chrome.com/docs/devtools/settings/shortcuts)

\[{
"type": "thumb-down",
"id": "missingTheInformationINeed",
"label":"Missing the information I need"
},{
"type": "thumb-down",
"id": "tooComplicatedTooManySteps",
"label":"Too complicated / too many steps"
},{
"type": "thumb-down",
"id": "outOfDate",
"label":"Out of date"
},{
"type": "thumb-down",
"id": "samplesCodeIssue",
"label":"Samples / code issue"
},{
"type": "thumb-down",
"id": "otherDown",
"label":"Other"
}\]

\[{
"type": "thumb-up",
"id": "easyToUnderstand",
"label":"Easy to understand"
},{
"type": "thumb-up",
"id": "solvedMyProblem",
"label":"Solved my problem"
},{
"type": "thumb-up",
"id": "otherUp",
"label":"Other"
}\]

{}


- ### Contribute

  - [File a bug](https://issuetracker.google.com/issues/new?component=1400036&template=1897236)
  - [See open issues](https://issuetracker.google.com/issues?q=status:open%20componentid:1400036&s=created_time:desc)
- ### Related content

  - [Chromium updates](https://blog.chromium.org/)
  - [Case studies](/case-studies)
  - [Archive](/deprecated)
  - [Podcasts & shows](https://web.dev/shows)
- ### Follow

  - [@ChromiumDev on X](https://twitter.com/ChromiumDev)
  - [YouTube](https://www.youtube.com/user/ChromeDevelopers)
  - [Chrome for Developers on LinkedIn](https://www.linkedin.com/showcase/chrome-for-developers)
  - [RSS](/static/blog/feed.xml)

- [Terms](//policies.google.com/terms)
- [Privacy](//policies.google.com/privacy)
- Manage cookies


- English
- Deutsch
- Español – América Latina
- Français
- Indonesia
- Italiano
- Nederlands
- Polski
- Português – Brasil
- Tiếng Việt
- Türkçe
- Русский
- עברית
- العربيّة
- فارسی
- हिंदी
- বাংলা
- ภาษาไทย
- 中文 – 简体
- 中文 – 繁體
- 日本語
- 한국어