From 4b1a9203c547c019fc5398082ae19a3f3d4c3efe Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:41:15 -0500 Subject: initial commit --- files/bn/tools/index.html | 187 ++++++++++++++ files/bn/tools/page_inspector/index.html | 280 ++++++++++++++++++++ files/bn/tools/style_editor/index.html | 94 +++++++ files/bn/tools/webide/index.html | 283 +++++++++++++++++++++ files/bn/tools/webide/troubleshooting/index.html | 81 ++++++ .../index.html" | 96 +++++++ 6 files changed, 1021 insertions(+) create mode 100644 files/bn/tools/index.html create mode 100644 files/bn/tools/page_inspector/index.html create mode 100644 files/bn/tools/style_editor/index.html create mode 100644 files/bn/tools/webide/index.html create mode 100644 files/bn/tools/webide/troubleshooting/index.html create mode 100644 "files/bn/tools/\340\246\244\340\247\215\340\246\260\340\246\277\340\246\256\340\246\276\340\246\244\340\247\215\340\246\260\340\246\277\340\246\225_\340\246\246\340\246\260\340\247\215\340\246\266\340\246\250/index.html" (limited to 'files/bn/tools') diff --git a/files/bn/tools/index.html b/files/bn/tools/index.html new file mode 100644 index 0000000000..de2b9c61ff --- /dev/null +++ b/files/bn/tools/index.html @@ -0,0 +1,187 @@ +--- +title: ফায়ারফক্স ডেভেলপার টুল +slug: Tools +tags: + - NeedsReview +translation_of: Tools +--- +
{{ToolsSidebar}}
+ +
ডেস্কটপ এবং মোবাইলে HTML, CSS এবং জাভাস্ক্রিপ্ট পরীক্ষা, সম্পাদন এবং ডিবাগ করুন
+ +
ফায়ারফক্স অরোরা ইন্সটল করুন + +

অরোরাতে নতুন কি আছে?

+ +

অরোরা হচ্ছে ফায়ারফক্সের প্রিভিউ বিল্ড, যেখানে আপনি যেকোনো নতুন ফিচার সর্বসাধারণের জন্য উন্মুক্ত করার আগেই ব্যবহারের সুযোগ পাবেন। বর্তমান অরোরাতে ডেভেলপার টুলসে নিচের আপডেট সমূহ রয়েছে:

+ + +
+ +
আপনার আইডিয়া শেয়ার করুন + +

আপনার আইডিয়া শেয়ার করুন

+ +

ডেভেলপার টুলসে নতুন ফিচারের জন্য অনুরোধ করুন অথবা অন্যান্য ডেভেলপারের আবেদন করা আইডিয়ার জন্য ভোট করুন।

+
+ +

+ +
+
+

তৈরি করা

+ +

ওয়েবসাইট এবং ওয়েব অ্যাপ এর জন্য অথরিং টুলস।

+ +
+
স্ক্র্যাচপ্যাড
+
ফায়ারফক্স এর ভেতরে একটি টেক্সট এডিটর দেয়া আছে যা আপনাকে জাভাস্ক্রিপ্ট লিখতে এবং এক্সিকিউট করতে দেয়।
+
স্টাইল এডিটর
+
বর্তমান পেজ এর CSS স্টাইল দেখুন এবং এডিট করুন।
+
শেডার এডিটর
+
WebGL এর ব্যবহার করা ফ্র্যাগমেন্ট শেডার সহ সবকিছু দেখুন এবং সম্পাদনা করুন
+
ওয়েব অডিও এডিটর
+
একটি অডিও কনটেক্সটে অডিও নোডের গ্রাফ পরীক্ষা করুন এবং তাদের প্যারামিটার পরিবর্তন করুন।
+
+
+ +
+

এক্সপ্লোর ও ডিবাগ করুন 

+ +

Examine, explore, and debug websites and web apps.

+ +
+
Web Console
+
See messages logged a web page, and interact with the page using JavaScript.
+
পেজ ইন্সপেক্টর
+
এইচটিএমএল , সিএসএস দেখতে  এবং সম্পাদন করতে সহায়তা করে
+
JavaScript Debugger
+
Stop, step through, examine and modify the JavaScript running in a page.
+
Network Monitor
+
See the network requests made when a page is loaded.
+
Storage Inspector
+
Inspect cookies, local storage, indexedDB and session storage present in a page.
+
Developer Toolbar
+
A command-line interface for the developer tools.
+
3D View
+
3D visualization of the page.
+
Eyedropper
+
Select a color from the page.
+
Working with iframes
+
How to target a particular iframe.
+
+
+
+ +
+
+
+

মোবাইল

+ +

মোবাইল ডেভেলপ করার টুলস সমূহ.

+ +
+
অ্যাপ ম্যানেজার
+
ফায়ারফক্স ওএস অ্যাপ ডিজাইন এবং ডেভেলপ।
+
WebIDE
+
অ্যাাপ ম্যানেজারের প্রতিস্তাপক যা ফায়ারফক্স ৩৩ ভার্সন থেকে শুরু হয়েছে।
+
Firefox OS Simulator
+
Run and debug your Firefox OS app on the desktop, without needing a real Firefox OS device.
+
Responsive Design View
+
See how your website or app will look on different screen sizes without changing the size of your browser window.
+
Debugging on Firefox for Android
+
Connect the developer tools to Firefox for Android.
+
+
+ +
+

Performance

+ +

Diagnose and fix performance problems.

+ +
+
Performance tool
+
Revamped JS profiler and frame rate timeline.
+
+ +
+
JavaScript Profiler
+
Figure out where your JavaScript code is spending its time.
+
Paint Flashing Tool
+
Highlights the parts of the page that are repainted in response to events.
+
Reflow Event Logging
+
See reflow events in the web console.
+
Network Performance
+
See how long the parts of your site take to load.
+
+
+
+ +
+
+
+

Debugging the browser

+ +

By default, the developer tools are attached to a web page or web app. But you can also connect them to the browser as a whole. This is useful for browser and add-on development.

+ +
+
Browser Console
+
See messages logged by the browser itself and add-ons, and run JavaScript code in the browser's scope.
+
Browser Toolbox
+
Attach the Developer Tools to the browser itself.
+
+
+ +
+

Extending the devtools

+ +

The developer tools are designed to be extensible. Firefox add-ons can access the developer tools and the components they use to extend existing tools and add new tools. With the remote debugging protocol you can implement your own debugging clients and servers, enabling you to debug websites using your own tools or to debug different targets using the Firefox tools.

+ +
+
Remote Debugging Protocol
+
The protocol used to connect the Firefox Developer Tools to a debugging target like an instance of Firefox or a Firefox OS device.
+
Source Editor
+
A code editor built into Firefox that can be embedded in your add-on.
+
The Debugger Interface
+
An API that lets JavaScript code observe the execution of other JavaScript code. The Firefox Developer Tools use this API to implement the JavaScript debugger.
+
Web Console custom output
+
How to extend and customize the output of the Web Console and the Browser Console.
+
+
+
+ +
+

More resources

+ +

This section lists resources which aren't maintained by Mozilla's developer tools team, but which are widely used by web developers. We've included a few Firefox add-ons in this list, but for the complete list see the “Web Development” category on addons.mozilla.org.

+ +
+
+
+
Firebug
+
A very popular and powerful web development tool, including a JavaScript debugger, HTML and CSS viewer and editor, and network monitor.
+
DOM Inspector
+
Inspect, browse, and edit the DOM of web pages or XUL windows.
+
Web Developer
+
Adds a menu and a toolbar to the browser with various web developer tools.
+
+
+ +
+
+
Webmaker Tools
+
A set of tools developed by Mozilla, aimed at people getting started with Web development.
+
W3C Validators
+
The W3C website hosts a number of tools to check the validity of your website, including its HTML and CSS.
+
JSHint
+
JavaScript code analysis tool.
+
+
+
diff --git a/files/bn/tools/page_inspector/index.html b/files/bn/tools/page_inspector/index.html new file mode 100644 index 0000000000..b434eaea59 --- /dev/null +++ b/files/bn/tools/page_inspector/index.html @@ -0,0 +1,280 @@ +--- +title: পেজ ইন্সপেক্টর +slug: Tools/Page_Inspector +translation_of: Tools/Page_Inspector +--- +
{{ToolsSidebar}}

যে কোন পেজের গঠন ও লেআউট পরীক্ষা বা সংস্কারের জন্য ইন্সপেক্টর ব্যবহার করুন। 

+ +

ইন্সপেক্টর ওপেন করা

+ +

ইন্সপেক্টর ওপেন করার বেশ কিছু উপায় আছেঃ

+ + + +

ইন্সপক্টর এক্টিভেট করার সাথে সাথে ব্রাউজার উইন্ডোর উপরে Toolbox দেখা যাবে।

+ +

আপনি যদি 'ইন্সপেক্টর এলিমেন্ট' এ ক্লিক করে ইন্সপেক্টর invoke করে থাকেন তাহলে এলিমেন্ট এরই মধ্যে সিলেক্ট হয়ে থাকবে এবং ইন্সপেক্টরটি নিম্নবণিতভাবে কাজ করবে যেভাবে এটি 'সিলেক্টিং এলিমেন্টস্' এ কাজ করে।

+ +

যদি তা না হয়ে থাকে তাহলে আপনি যখন আপনার মাউস পেজটিতে ঘুরাবেন তখন মাউসের নিচের এলিমেন্ট dotted বডার দিয়ে হাইলাইট হয়ে যাবে এবং একটি অ্যানোটেশন এটির HTML ট্যাগ ডিসপ্লে করবে। একই সাথে, এর HTML ডেফিনেশনও ইন্সপেক্টরের বাঁ দিকের pane কন্টেক্সটে ডিসপ্লে হয়ে যাবে।

+ +

+ +

এলিমেন্টের উপর ক্লিক করলে তা সিলেক্ট হয়ঃ আপনি একটি এলিমেন্ট সিলেক্ট করে থাকলে ইন্সপেক্টরটি নিচের মত দেখাবে ও কাজ করবে সেভাবে যেভাবে তা নিচের "সিলেক্টিং এলিমেন্টস্" এ কাজ কড়ে।

+ +

এলিমেন্ট সিলেক্ট করা

+ +

যখন একটি এলিমেন্ট সিলেক্ট করা হয় তখন তার মার্কআপ ইন্সপেক্টরের বাঁ দিকে HTML paneএ হায়লাইট হয়ে যায় এবং ইন্সপেক্টরের ডান CSS pane এর স্টাইল ইনফরমেশন শো করেঃ

+ +

এভাবেই এলিমেন্ট সিলেকশনের বিভিন্ন কাজ উল্লেখযোগ্যভাবে পরিবর্তিত হ্য ফায়ারফক্স 29এ।

+ +

ফায়ারফক্স 29 এর আগে

+ +

আপনি যখন একবার কোন পেজে একটি এলিমেন্টে ক্লিক করে এটি সিলেক্ট করেন তখনই ইন্সপেক্টর'স ডিসপ্লে সেই এলিমেন্টে লক হয়ে যায়। সেজন্য আপনি অন্য কোন ইন্সপেক্টর না চালু করেই মাউস ঘোরাতে পারেন।

+ +

এলিমেন্টের জন্য নির্ধারিত annotationটির ডানদিকে ও বাঁদিকে একটি করে বাটন থাকে। বাঁ দিকের বাটনটি আপনাকে নতুন এলিমেন্ট সিলেক্ট করার সুযোগ দিয়ে পুরনো এলিমেন্ট আনলক করে। ডানদিকের বাটনটি এলিমেন্টটির জন্য একটি পপআপ মেনু ডিসপ্লে করে।

+ +

+ +

ফায়ারফক্স 29 ও তার পর

+ +

ফায়ারফক্স 29 থেকে পেজের কোন এলিমেন্টের সিলেক্ট করলে এর চারদিকের ডট দেওয়া বর্ডার এবং এর জন্য নির্ধারিত অনোটেশন দেখানো হয় না। এমনকি  এলিমেন্ট সিলেক্ট করার সাথে সাথে ইন্সপেক্টরগুলোও লক হয়ে যায় না। আপনি যখন মারকাপ পেন এর চারদিকে মাউসটি মুভ করেন তখন কোরেস্পন্ডিঙ এলিমেন্টের চারদিকে ডট দেওয়া বর্ডার দেখা জায়।অয়েব পেজের কোন ভিনণ এলিমেন্ট সিলেক্ট করার জন্য "Select element" বাটনটি ক্লিক করুন, যা এখন Toolbox toolbar দেখা যায়ঃ

+ +

{{EmbedYouTube("zBYEg40ByCM")}}

+ +

এলিমেন্ট পপআপমেনু

+ +
+

ফায়ারফক্স 29 থেকে পরবর্তীতে ওয়েব পেজের অটোনেশন আর দেখা জায় না। তাই শুধুমাত্র HTML পেন এ কনট্যাক্স-ক্লিকিন এর মাধ্যমে পপআপ মেনু ওপেন করতে পারেন

+
+ +

পপআপ মেনু ব্যবহার করে আপনি যে কোন নির্দিষ্ট ক্ষেত্রে বেশ কিছু সাধারণ কাজ করতে পাড়েন। আপনি দুইভাবে মেনুটি এক্টিভেট করতে পারেনঃ

+ + + +

+ + + +

+ +

মেনুটি আপনাকে যা যা করতে সুযোগ দেয়ঃ

+ + + +

ডাটা URL হিসাবে ইমেজ কপি করা

+ +
+

ডাটা URL হিসাবে কপি করা ফায়ারফক্স 29এ নতুন।

+
+ +

ফায়ারফক্স 29 থেকে পরবর্তীতে, যদি currently selected এলিমেন্টটি কোন ইমেজ হয় তাহলে পপআপ মেনুতে একটি অপশন থাকে ডাটা ইউ আর এল হিসাবে ক্লিপবোর্ডে ইমেজ কপি করার জন্যঃ

+ +

+ +

HTML এডিট করা

+ +
+

HTML এডিট করা শুধুমাত্র ফায়ারফক্স 27 এই সহজলভ্য।

+
+ +

কোন এলিমেন্টের আউটারHTML এডিট করার জন্য এলিমেন্টের পপআপ মেনু এক্টিভেট করে সিলেক্ট করুন "Edit As HTML"। আপনি HTML paneএ একটি টেক্সট-বক্স দেখবেনঃ

+ +

আপনি যে কোন HTML এখানে সংযোগ করতে পারবেনঃ এলিমেন্টের ট্যাগ পরিবর্তন করা, existing এলিমেন্ট পরিবর্তন করা আথবা নতুন কোন এলিমেন্ট সংযোগ করা। বক্সের বাইরে ক্লিক করার সাথে সাথে আপনার করা পরিবর্তনগুলো পেজটিতে অ্যাপ্লাই হয়ে যাবে।

+ +

HTML পেন

+ +

HTML পেন আপনাকে পেজটির HTML একটি গাছের আকারে দেখায় এটির শাখাগুলো collapsible. নির্ধারিত এলিমেন্টগুলোর শুরুর এবং শেষের ট্যাগগুলো ধূসর পটভূমিতে হাইলাইট করা হয়।

+ +

আপনি এই পেনে সরাসরি এডিট করতে পারেন - বিভিন্ন ট্যাগ, অ্যাট্রিবিউটস এবং কন্টেন্টসঃ আপনি যেই এলিমেন্ট এডিট করতে চান তা পরিবর্তন করুন এবং পরিবর্তনগুলো সাথে সাথে দেখতে Enter ক্লিক করুন।

+ +

কোন এলিমেন্টে কন্টেক্স-কিল্ক করলে তা ডিসপ্লে করে একটি পপআপ মেনু সেই এলিমেন্টে কাজ করার জন্য।

+ +

HTML পেন টুলবার

+ +

এই পেইন টির উপরে একটি ডেডিকেটেড টুলবার তিনটি অংশে ভাগ হয়ে আছেঃ

+ +
+

ফায়ারফক্স 29 থেকে পরবর্তীতে "Select element" বাটনটি Toolbox এ মুভ করা হয়েছে।

+
+ + + +

CSS পেন

+ +

CSS পেন কারেন্টলি সিলেক্টেড এলিমেন্টে ব্যবহৃত স্টাইলের তথ্য প্রদর্শন করে। চারটি ভিন্ন ভিন্ন ভিউ আছে এখানেঃ "রুলস্", "কম্পিউটেড", "ফন্টস" এবং "বক্স মডেল"। পেনের সর্ব উপরের টুলবারটি ব্যবহার করে আপনি তাদের মধ্যে সুইচ করতে পারেনঃ

+ +

+ +

রুলস্ ভিউ

+ +

নির্ধারিত এলিমেন্টে ব্যবহৃত সব রুলস তালিকাবদ্ধ রাখে এই ভিউটি, বিশেষায়িত এর হ্রাসক্রম ভিত্তিতেঃ

+ +

+ +

রুলস ভিউ সিউডো-এলিমেন্টস এবং ব্যবহৃত রুলস তালিকাবদ্ধ করে।

+ +

রুল ডিসপ্লে

+ +

এটি একটি স্টাইলশীটে প্রত্যেকটি রুল ডিসপ্লে করে, সেক্টর এর একটি লিস্টসহ property:value; ডিকলারেশনের লিস্ট ও থাকে।

+ +

যেসব রুল অন্য রুলের বিপক্ষে যায় সেগুলো কেটে দেওয়া হয়েছে। কোন নির্দেশনার উপরে মাউস রাখলে এটির নিচে একটি চেকবক্স দেখা যাবেঃকোন রুল চালু বা বন্ধ করতে আপনি এটি ব্যবহার করতে পারেন।

+ +

CSS ফাইলের লিঙ্ক

+ +

প্রতিটি রুলের উপরে ডান দিকে ফাইলনেম সোর্স এবং লাইন নাম্বার লিঙ্ক হিসাবে দেখানো হয়ঃ ক্লিক করলে স্টাইল এডিটর থেকে এটি ওপেন হয়ে যাবে।

+ +

ফায়ারফক্স 29 থেকে পরবর্তীতে ইন্সপেক্টর CSS সোর্স ম্যাপ বোঝে। এর মানে হল আপনি যদি CSS প্রিপ্রসেসর ব্যবহার করেন যার সোর্স ম্যাপ সাপোর্ট আছে এবং তা আপনি স্টাইল এডিটর সেটিং এ সক্রিয় করেছেন তাহলে লিঙ্কটি আপনাকে প্রকৃত সোরসে নিয়ে যাবে, জেনারেটেড CSS নয়ঃ

+ +

+ +

CSS সোর্স ম্যাপ সাপোর্ট সম্পর্কে আরো জানুন স্টাইল এডিটর ডকুমেন্টেশন এ।

+ +

রঙ নমুনা

+ +
+

ফায়ারফক্স 27 থেকে পরবর্তীতে, আপনি কালার ভেল্যুর পরে দৃশ্যমান একটি রঙ নমুনা দেখতে পাবেনঃ

+
+ +

+ +

কালার পিকার

+ +
+

ফায়ারফক্স 28 থেকে পরবর্তীতে, আপনি রঙ নমুনাতে (color sample) ক্লিক করলে রঙ পরিবর্তন করার জন্য একটি কালার পিকার দেখতে পাবেনঃ

+
+ +

+ +

পটভূমি-দৃশ্য পূর্ব পরিদর্শন

+ +
+

ফায়ারফক্স 27 থেকে পরবর্তীতে, রুলের উপর মাউস ঘোরালে আপনি ব্যাকগ্রাউন্ড-ইমেজ বা পটভূমি-দৃশ্য  নামে বিভিন্ন ইমেজের বিশেষ ব্যবহৃত একটি প্রিভিউ দেখতে পাবেনঃ

+
+ +

+ +

ভিজুয়ালাইজেশন পরিবর্তন

+ +
+

ফায়ারফক্স 29এ এটি নতুন।

+
+ +

ফায়ারফক্স 29 থেকে পরবর্তী ক্ষেত্রে আপনি রুলস রিভিউতে কোন ট্রান্সফরম প্রপার্টিতে হোভার করলে,আপনি একটি টুলটিপ পাবেন যা আপনাকে দেখাবে এটি যা যা পরিবর্তন করে।

+ +

+ +

এডিট করার নিয়মাবলী

+ +

আপনি যদি কোন দিক্লারেশ্নে ক্লিক করেন তবে আপনি তার বৈশিষ্ট্যাবলী বা মান সংস্কার করতে পারবেন এবং সাথে সাথেই তা দেখতে পাবেন। একটি রুলে নতুন ডিকলারেশন যুক্ত করার জন্য ক্লিক করুন রুলের সর্বশেষ লাইনটিতে (শেষ বন্ধনী দিয়ে অধিকৃত লাইনটি)। সংস্কার করার সময় যদি আপনি অপ্রচলিত মান বা কোন অজানা বৈশিষ্টের নাম প্রবেশ করান, তবে ডিকলারেশনের নিচে একটি হলুদ সতর্ক সংকেত দেখা যাবে।

+ +

আপনার করা যে কোন পরিবর্তনই ক্ষণস্থায়ীঃ পেজটি পুনরায় লোড করলে প্রকৃত স্টাইল রিস্টোর হয়ে যাবে।

+ +

Tip: You can use the arrow keys to increase/decrease numeric rules while editing. Up arrow will turn "1px" to 2px, and Shift+up/down will increment by 10. Alt+up/down change values by 0.1, and shift+Page up/down will add or subtract 100 from the value.

+ +

কম্পিউটেড ভিউ

+ +

This view organizes the style of the element by property. It lists all CSS properties which have been applied to this element in alphabetical order: it shows the calculated value that each CSS property has for for the selected element:

+ +

+ +

Clicking the arrow next to the property name shows the rule that set this value, along with a link to the source filename and line number:

+ +

By default, it only shows values that have been explicitly set by the page: to see all values, click the "Browser styles" box.

+ +

Typing in the search box performs a live filtering of the list, so, for example, if you just want to see font-related settings, you can type "font" in the search box, and only properties with "font" in the name will be listed. You can also search for the values of properties: to find the rule responsible for setting the font to "Lucida Grande", type that in the search box.

+ +

ফন্টস্ ভিউ

+ +

সিলেক্টেড এলিমেন্ট অনুযায়ী প্রয়োজনীয় সব ফন্ট দেখায় এটি। মনে রাখবেন, আপনি আপনার সিস্টেমে যে ফন্ট ব্যবহার করেন তাও দেখায় এটি, css এ যে ফন্ট নির্ধারণ করা আছে, তার থেকে এটি আলাদা হতে পারেঃ

+ +

+ +

ফন্ট ভিউতে টেক্সট ভিউ হল "Abc" ডিফল্ট অনুসারে কিন্তু আসলে এটি একটি টেক্সট এরিয়া যা পড়্যোজন মত পরিবর্তন করা যেতে পারে।

+ +

বক্স মডেল ভিউ

+ +

নির্দিষ্ট এই এলিমেন্টে অ্যাপ্লাই করলে এটি বক্স মডেল এর একটি গ্রাফিকাল representation দেখায়ঃ

+ +

+ + + +

+ +

 ওয়েব কনসোল এর সাহায্যে পেজ ইন্সপেক্টর ব্যবহার করা

+ +

ওয়েব কনসোলকে আপনি পেজ ইন্সপেক্টর হিসাবেও ব্যবহার করতে পারেন। এমনকি আপনি একটি বোনাস ফিচার ও পIবেন! আপনি যদি পেজ ইন্সপেক্টরে কোন এলিমেন্ট সিলেক্ট করে থাকেন তবে তাও variable $0. ব্যবহার করে ওয়েব কনসোলের জাভাস্ক্রিপ্টে পাঠানো যাবে।
+  

+ +

+ +

ডেভলপার API

+ +

ফায়ারফক্স এডঅনস্ এই কন্টেক্স chrome://browser/content/devtools/inspector/inspector.xul থেকে নিচের বিভিন্ন অবযেক্টে প্রবেশ করতে পারেঃ

+ +

উইন্ডো.ইন্সপেক্টর

+ +

ইন্সপেক্টর-পেনেল.js এ আলোচিত। বিভিন্ন এট্রিবিউটস্ এবং ফানশনঃ

+ + + +

Bindable events using on:

+ +

মার্কআপ লোডেড

+ +

বামদিকের পেনেল রিফ্রেশ করার পর যখন পেজ পরিবর্তন কার হয় তখন এর প্রয়োজন হয়।

+ +

ready

+ +

প্রথম মার্কআপ লোডে দরকার হয়।

+ +

সিউডোক্লাস

+ +

Called after toggle of a pseudoclass.

+ +

লে-আউট পরিবর্তন

+ +

"paint and resize এর মত কম গুরুত্বপূর্ণ পরিবর্তন ইভেন্ট।"

+ +

কীবোর্ড শর্টকাটস

+ +

{{ Page ("en-US/docs/tools/Keyboard_shortcuts", "page-inspector") }}

+ +

গ্লোবাল শর্ট-কাটস

+ +

{{ Page ("en-US/docs/tools/Keyboard_shortcuts", "all-toolbox-tools") }}

+ +

{{ languages( { "ja": "ja/Tools/Page_Inspector"} ) }}

diff --git a/files/bn/tools/style_editor/index.html b/files/bn/tools/style_editor/index.html new file mode 100644 index 0000000000..54509b86ca --- /dev/null +++ b/files/bn/tools/style_editor/index.html @@ -0,0 +1,94 @@ +--- +title: স্টাইল এডিটর +slug: Tools/Style_Editor +translation_of: Tools/Style_Editor +--- +
{{ToolsSidebar}}

স্টাইল সীট এডিটর আপনাকে সক্ষম করবে ঃ

+ + + +

IFrame

+ +

স্টাইল এডিটর খুলতে হলে  "Web developer" মেনু থেকে "Style Editor" বাছাই করতে হবে( যা Mac এর "Tools" মেনু এর সাবমেনু)।স্টাইল এডিটর সক্রিয় হউয়ার সাথে সাথে ,Toolbox ব্রাউজার এর পাদদেশ দৃশ্যমান হবে:

+ +

+ +

স্টাইল এডিটর প্রধান দুই ভাগ এ বিভক্ত : বামপাশ এর স্টাইল সীট প্যান , এবং ডানপাশ এর এডিটর।

+ +

স্টাইল সীট প্যান

+ +

বামপাশ এর স্টাইল সীট, বর্তমান ডকুমেন্ট এর ব্যবহৃত স্টাইলসীট এর তালিকা দিবে।সীট এর নাম এর বামপাশ দেওয়া  eyeball আইকন এ ক্লিক করার মাধ্যমে আপনি দ্রুত গিভেন সীট ব্যবহার এর  অন এবং অফ  এ toggle করতে পারবেন।লিস্ট এ থাকা প্রত্যেক সীট এর কোণার নীচের অংশের ডানদিকে অবস্থিত সেভ বাটন এ ক্লিক করে আপনি আপনার স্টাইল সীট এর যেকোনো পরিবর্তন আপনার লোকাল কম্পিউটার এ সেভ করতে পারবেন।

+ +

এডিটর প্যান

+ +

ডানপাশ এর অংশ টি হচ্ছে এডিটর প্যান। এখানে আপনার জন্য নির্বাচিত কয়েকটি স্টাইল সীট এর সোর্স পড়তে এবং এডিট করতে দেওয়া আছে । পেজ এর যেকোনো পরিবর্তন এটিতে অবিলম্বে কাজ করবে। এটি পরীক্ষা করতে,পরিবর্তন করতে এবং সংশোধন করতে সহজ করে তোলে। আপনি যখন আপনার পরিবর্তন নিয়ে সন্তুষ্ট হবেন, তখন স্টাইল সীট প্যান এর এন্ট্রিতে যে সেভ বাটন আছে তাতে ক্লিক করে একটি কপি লোকাল হিসেবে সেভ করতে পারবেন।   

+ +

এডিটর আপনার  CSS কে সহজ ভাবে পরার জন্য লাইন সংখ্যা এবং syntax hightiliting দিয়ে থাকে।এতে  কয়েকটি  keyboard shortcuts ও সাপোর্ট করে।

+ +

 স্টাইল এডিটর অরিজিনাল টি কে পরিবর্তন না করে,সক্রিয় ভাবে de-minimize করে।এটি খুব অনুকুলে সহজ ভাবে পেজে কাজ করতে সাহায্য করে।

+ +

অটোকমপ্লিট

+ +

অটোকমপ্লিট  ফায়ারফক্স ২৯ এ নতুন

+ +

ফায়ারফক্স ২৯ হতে,স্টাইল এডিটর অটোকমপ্লিট সমর্থন করে।টাইপ শুরু করলে ইহা সাজেশন প্রস্তাব করে।

+ +

আপনি এটি Style Editor settings এ বন্দধ করে দিতে পারবেন

+ +

স্টাইলসীট তৈরি করা এবং আমদানি করা

+ +

টুলবার এর নিউ বাটন এ ক্লিক করে আপনি নতুন স্টাইল সীট তৈরি করতে পারবেন।এরপর আপনি নতুন এডিটর এ  CSS দেয়ার মাধ্যমে শুরু করতে পারেন এবং নতুন স্টাইল যা ব্যবহার করেছেন তা দেখতে পারবেন অন্যান্য সীট এর মত সরাসরি।

+ +

আপনি ডিস্ক থেকে স্টাইল সীট লোড করতে পারবেন এবং ইম্পোর্ট বাটন এ ক্লিক করে পেজ এ ব্যবহার করতে পারবেন।

+ +

সোর্স ম্যাপ সাপোর্ট

+ +
+

CSS সোর্স ম্যাপ সাপোর্ট ফায়ারফক্স ২৯ এ নতুন বৈশিষ্ট্

+
+ +

{{EmbedYouTube("zu2eZbYtEUQ")}}

+ +

প্রি প্রসেসর যেমন  Sass, Less, অথবা Stylus ব্যবহার করে ওয়েব ডেভেলপাররা প্রায়ই CSS ফাইল তৈরী করে।এই টুল আরও গরীয়ান এবং অভিবাক্তপূর্ণ শব্দবিন্যাস থেকে CSS ফাইল  তৈরী করতে সাহায্য করে। আপনি যদি এটি করেন তাহলে দেখতে পাবেন যে,তৈরীক্রিত CSS দেখতে পাওয়া এবং এডিট করা তেমন সুবিধা জনক না,কারন যে কোড আপনি ধারন করছেন তা প্রি প্রসেসর শব্দবিন্যাস,আপনার তৈরীক্রিত নয়। তাই আপনাকে তৈরীক্রিত CSS এডিট করতে হবে তারসাথে এটি পুনরাই অরিজিনাল সোর্স এ মানুয়াল্-ই কাজ করাতে হবে।

+ +

সোর্স ম্যাপ টুল গুলো আপনাকে তৈরীক্রিত CSS থেকে অরিজিনাল শব্দবিন্যাস  এ ফিরিয়ে আনতে সাহায্য করে,যাতে তাদের দেখা যায় এবং অরিজিনাল শব্দবিন্যাস এর ফাইল গুলো কে আপনি এডিট করতে পারেন।ফায়ারফক্স ২৯ স্টাইল এডিটর CSS সোর্স ম্যাপ ধরতে পারে।

+ +

এটার মানে এই যে,ধরুন আপনি  Sass দিলেন তাহলে স্টাইল এডিটর আপনাকে  Sass ফাইল দেখাবে এবং এডিট করতে দিবে,তাদের তৈরী CSS নয় :

+ +

+ +

এইটা কাজ করানোর জন্য আপনার উচিত :

+ + + +

অরিজিনাল সোর্স গুলো দেখা

+ +

এখন আপনি যদি  Style Editor settings এর "Show original sources" টি দেখেন, Rules view  এর CSS রুল গুলো এর পরবর্তী লিংক স্টাইল সীট এর অরিজিনাল সোর্স এ নিয়ে যাবে।

+ +

এডিট অরিজিনাল সোর্স

+ +

আপনি স্টাইল এডিটর এর অরিজিনাল সোর্স গুলো এডিট করতে পারবেন এবং যা ব্যবহার করা হয়েছে তা ঠিক তখনি সরাসরি দেখা যাবে।এটা কে কাজ করানোর জন্য আরও দুটি স্টেপ আছে।

+ +

প্রথমে,আপনার প্রসেসর টিকে এমন ভাবে তৈরী করুন যাতে তা অরিজিনাল সোর্স কে দেখতে পারে এবং নিজস্ব ভাবে CSS তৈরী করে সোর্স পরিবর্তন করার সাথে সাথে। Sass এ আপনি --watch অপশন টি দেওয়ার মাধ্যমে কাজ টি করতে পাড়েন:

+ +

sass index.scss:index.css --sourcemap --watch

+ +

পরবর্তী তে,ফাইল এর পাশে "Save" বাটন এ ক্লিক করে স্টাইল এডিটর থেকে অরিজিনাল সোর্স সেভ করতে হবে, এবং অরিজিনাল ফাইল এ সেভ করতে হবে।

+ +

এখন আপনি যখন স্টাইল এডিটর এর সোর্স ফাইল পরিবর্তন করবেন,CSS একাই তৈরী হবে এবংপরিবর্তন টি আপনি তখন-ই দেখতে পারবেন।

+ +

কীবোর্ড শর্টকাট

+ +

সোর্স এডিটর শর্টকাট

+ +

{{ Page ("en-US/docs/tools/Keyboard_shortcuts", "source-editor") }}

+ +

{{ languages( { "ja": "ja/Tools/Style_Editor"} ) }}

diff --git a/files/bn/tools/webide/index.html b/files/bn/tools/webide/index.html new file mode 100644 index 0000000000..0bad22e164 --- /dev/null +++ b/files/bn/tools/webide/index.html @@ -0,0 +1,283 @@ +--- +title: WebIDE +slug: Tools/WebIDE +tags: + - NeedsTranslation + - TopicStub +translation_of: Archive/WebIDE +--- +
{{ToolsSidebar}}
+

The WebIDE is available from Firefox 34 onwards.

+ +

You can also enable it in Firefox 33, by changing a preference: Visit about:config, find the preference called devtools.webide.enabled and set it to true.

+
+ +
+

The WebIDE is the replacement for the App Manager. Like the App Manager, it enables you to run and debug Firefox OS apps using the Firefox OS Simulator or a real Firefox OS device.

+ +

However, it also provides an editing environment for you to create and develop Firefox OS apps, including a tree view of all the files in your app with the ability to edit and save them, and two app templates to help you get started.

+
+ +

With the WebIDE, you first set up one or more runtimes. A runtime is an environment in which you'll run and debug the app. A runtime could be a Firefox OS device connected to the desktop over USB, or it could be a Firefox OS Simulator installed on the desktop itself.

+ +

Next, you create an app, or open an existing app. If you're creating a new app you start with a template that includes the directory structure and the minimum boilerplate you need to get started, or a more complete template that shows how to use a privileged API. The WebIDE shows your app's files in a tree, and you can edit and save them using a built-in source editor. Of course, you don't have to use the built-in editor: you can develop your app entirely outside the WebIDE, and only use it for debugging.

+ +

Finally, you can install the app in one of the runtimes and run it. You can then open the usual suite of developer tools - the Inspector, Console, JavaScript Debugger and so on - to examine and modify the running app.

+ +

System requirements

+ +

To develop and debug apps using the WebIDE, all you need is Firefox version 33 or later. To test on a real Firefox OS device, you need a device running Firefox OS 1.2 or later, and a USB cable.

+ +

You can only use the WebIDE if you're targeting Firefox OS 1.2 or later.

+ +

Opening the WebIDE

+ +

In the Web Developer menu, click on the WebIDE entry and the WebIDE opens. You can also use the keybinding Shift-F8:The dropdown on the left labeled "Open App" lets you open existing apps or create new ones. The dropdown on the right labeled "Select Runtime" lets you select a runtime or set up a new runtime.

+ +

The buttons in the middle run, stop, and debug the app: they are only enabled when you have opened an app and selected a runtime.

+ +

Setting up runtimes

+ +

Under the "Select Runtime" dropdown, runtimes are grouped into three types:

+ + + +

The first time you click the dropdown, you might not see any runtimes here:

+ +

The rest of this section describes how you can add some runtimes.

+ +

Connecting a Firefox OS device

+ +

Before you can connect a Firefox OS device, there's some setup you have to go through:

+ + + +
+

Linux only:

+ + +
+ +
+

Windows only:

+ + +
+ +

If there are any other Android devices connected to your computer, disconnect them. Now connect the device to the computer using USB. You should see the device appear under "USB DEVICES":

+ +

+ +

If you don't see your device, see the Troubleshooting page.

+ +

Adding a Simulator

+ +

The Firefox OS Simulator is a version of the higher layers of Firefox OS that simulates a Firefox OS device, but runs on the desktop. It runs in a window the same size as a Firefox OS device, includes the Firefox OS user interface and built-in apps, and simulates many of the Firefox OS device APIs.

+ +

This means that in many cases, you don't need a real device to test and debug your app.

+ +

The Simulator is big, so it doesn't ship inside Firefox but as a Firefox add-on. If you click "Install Simulator" in the Runtimes dropdown menu, you will go to a page from which you can install Simulators for various versions of Firefox OS.

+ +

You can install as many as you like. Be patient, though: the Simulator is large and may take a few minutes to download. Once you've installed some Simulators you can close this "Extra Components" window, and the Simulators you've installed appear as options in the Runtimes dropdown menu:

+ +

To learn more about the Simulator, see its documentation page.

+ +

Custom runtimes

+ +

With a custom runtime you can use an arbitrary hostname and port to connect to the remote device.

+ +

Under the hood, Firefox OS devices and Android devices connect to the desktop using a program called the Android Debug Bridge, or ADB. By default, the WebIDE uses an add-on called the ADB Helper: this simplifies the process for you by installing ADB and setting up port forwarding so the Firefox desktop tools can exchange messages with the device.

+ +

This is convenient in most cases, but sometimes you might want to use ADB outside of the WebIDE: for example, you might be running ADB directly from the command line. In that case you'll connect to the device by specifying a host and port using the adb forward command.
+
+ If you then want to use WebIDE to connect as well, you should disable the ADB Helper add-on and connect WebIDE using the Custom runtime option, entering the host and port that you passed to adb forward.

+ +

Also, the ADB Helper does not yet support connecting to Firefox for Android, so if you want to connect WebIDE to Firefox for Android, you'll need to set up your own port forwarding and use a custom runtime. See more about connecting to Firefox for Android using ADB.

+ +

Selecting a runtime

+ +

Once you've set up a runtime you can select it using the "Select Runtime" menu.

+ + + +

Now the "play" button in the center of the WebIDE toolbar is enabled: click it to install and run the app in the selected runtime.

+ +

Runtime actions

+ +

When a runtime is selected, the Runtimes dropdown menu has three extra items:

+ + + +

+ +

+ +

Creating and opening apps

+ +

Under the "Open App" menu you get three options: create a new app, open a packaged app, and open a hosted app:

+ +

+ +

Create a new app

+ +

Select "New App..." to create a new app. You'll see a dialog offering you a choice between two templates, "Privileged Empty App" and "Privileged App".

+ +

+ +

Both templates are from Mozilla's app template collection, and provide you with the basic structure you need to get started. The "Privileged App" shows how an app can use permissions to load cross-origin content.

+ +

Once you've selected a template you'll be asked to name the app and select a directory to store the files, and then the new app is opened in the project editor.

+ +

Open a packaged app

+ +

Select "Open Packaged App..." to open a packaged app. You'll be asked to select a directory containing the app's manifest, and the app will be opened in the project editor.

+ +

Open a hosted app

+ +

Select "Open Hosted App..." to open a hosted app. You'll be asked to enter a URL pointing to the app's manifest, and the app will be opened in the project editor.

+ +

Editing apps

+ +

The project editor provides an environment for editing apps. There's a tree view on the left of all the files in the app: you can add and delete files here using a context menu. There's an editor pane on the right.

+ +

The app summary page

+ +

When you first open or create an app, the editor pane is occupied by the app summary page, which is shown below:

+ +

+ +

You can always get back to the app summary page by clicking on the root of the tree on the left.

+ +

Manifest validation

+ +

The WebIDE automatically checks the manifest for certain common problems. If it finds a problem it indicates that the app is invalid and describes the problem in the app's summary:

+ +

+ +

Of course, you can edit the manifest.webapp file right in the project editor as well.

+ +

The source editor

+ +

The WebIDE uses the CodeMirror source editor.

+ +

Source editor shortcuts

+ +

{{ Page ("en-US/docs/tools/Keyboard_shortcuts", "source-editor") }}

+ +

Code completion

+ +

When editing CSS and JavaScript, the editor provides autocomplete suggestions. CSS autocompletion is always enabled:

+ +

To display autocomplete suggestions in JavaScript press Control + Space:

+ +

+ +

Inline documentation

+ +

The editor also shows inline documentation for JavaScript. Press Shift + Space to see a popup containing documentation for the symbol your cursor is on:

+ +

+ +

Clicking the [docs] link in the popup will take you to the MDN page for the symbol.

+ +

Saving files

+ +

For changes to your files to take effect you need to save them. Files with unsaved changes get an asterisk next to their name in the tree view, and you can save files using the menu or Control+S (Command+S on Mac OS X).

+ +

Removing projects

+ +

To remove an app from the WebIDE, go to the app summary page and click "Remove Project".

+ +

Running and debugging apps

+ +

When you're ready to run the app, you need to select a runtime from the "Select Runtime" dropdown menu. If you don't have any available runtimes here, find out how to add some in Setting up runtimes.

+ +

The "play" button in the center of the WebIDE toolbar is now enabled: click it to install and run the app in the selected runtime:

+ +

To debug the app, click the "Pause" button and the Developer Tools Toolbox appears, connected to your app:

+ +

Exactly which tools you'll have available depends on the runtime, but you will at least have the basics: the Inspector, Console, JavaScript Debugger, Style Editor, Profiler and Scratchpad. Just as in a web page, any changes you make in the tools are visible immediately in the app, but are not persistent. Conversely, any changes you make in the editor pane can be saved straight back to disk, but are not visible without restarting the app.

+ +

Debugging certified apps (including main process)

+ +

You can run the debugger against the simulator, b2g desktop, or a real device.

+ +

With the Simulator, if you click on the app dropdown menu while the runtime is selected, you can see and debug not only your app but all apps running in that runtime, including certified apps:

+ +

+ +


+ However, to debug certified apps on a real device:

+ + + +

To enable certified app debugging, connect to the runtime, and then, in the menu, go to Runtime > Runtime Info. From here, if you see "DevTools restricted privileges: yes", that means certified apps can't be debugged. The path then differs depending on what you are debugging against:

+ + + +

Now (or after a restart of the B2G desktop client) in the WebIDE you should see all the certified apps on the device.

+ +

Monitoring performance

+ +

If you're interested in the performance of your apps, there are a few ways to measure their impact on the runtime in WebIDE:

+ + + +

Troubleshooting

+ +

If you have any problems working with the WebIDE, see the Troubleshooting page.

+ +

 

+ +

 

diff --git a/files/bn/tools/webide/troubleshooting/index.html b/files/bn/tools/webide/troubleshooting/index.html new file mode 100644 index 0000000000..34b019da6d --- /dev/null +++ b/files/bn/tools/webide/troubleshooting/index.html @@ -0,0 +1,81 @@ +--- +title: WebIDE ট্রাবলশুটিং +slug: Tools/WebIDE/Troubleshooting +translation_of: Archive/WebIDE/Troubleshooting +--- +
{{ToolsSidebar}}

একটি Firefox OS ডিভাইসের সাথে সংযুক্ত হওয়া

+ +

যদি এমন হয় যে, আপনি একটি Firefox OS ডিভাইস WebIDE এর সাথে সংযুক্ত করার চেষ্টা করছেন, কিন্তু সেটি দেখাচ্ছে না, তাহলে এখানে কিছু উপায় বলা আছে, যা আপনি চেষ্টা করতে পারেন:

+ + + +

ইচ্ছামত ডিবাগ করা (প্রত্যায়িত অ্যাপ, বিল্ট-ইন অ্যাপ, ডিভাইসে ইতোমধ্যে ইনস্টল করা অ্যাপ)

+ +

যদি এমন হয় যে আপনি প্রত্যায়িত অ্যাপ, বিল্ট-ইন অ্যাপ বা একটি বাস্তব ডিভাইসে ইতোমধ্যে ইনস্টল করা অ্যাপ ডিবাগ করতে পারছেন না, তাহলে হয়ত আপনি WebIDE এর নিয়ন্ত্রিত ক্ষমতার নিরাপত্তা নিয়মের ভেতর রয়েছেন। আরও জানতে ইচ্ছেমত ডিবাগ করা (প্রত্যায়িত অ্যাপ, মূল প্রক্রিয়া ইত্যাদি সহ) দেখুন।

+ +

অন্যান্য ব্রাউজারে সংযোগ স্থাপন (ক্রোম, সাফারি)

+ +

অন্যান্য ব্রাউজার যেমন- ক্রোম, সাফারি এর সাথে WebIDE সংযোগ স্থাপনের জন্য Valence (formerly Firefox Tools Adapter) ব্যবহার করে।

+ +

যদি আপনার উপরে উল্লেখিত ব্রাউজারে সংযোগ স্থাপনে সমস্যা হয়, তাহলে Valence page এর সেটাপের ধাপগুলো এবং অন্যান্য নোট সমূহ অনুসরণ করুন।

+ +

প্রজেক্ট লিস্ট লোড করা সম্ভব হচ্ছে না

+ +

যদি আপনি ফায়ারফক্সের একটি সংস্করণে WebIDE চালু করেন, এবং তারপর একটি পুরাতন সংস্করণে একই প্রোফাইল দিয়ে ব্যবহার করেন, তাহলে আপনি "Unable to load project list" বা "প্রজেক্ট লিস্ট লোড করা সম্ভব হচ্ছে না" এমন ইরর মেসেজ দেখতে পাবেন।

+ +

WebIDE যে স্টোরেজ সিস্টেম ব্যবহার করে (IndexedDB) সেটা নতুন ফায়ারফক্স সংস্করণের জন্য স্থানান্তর বা পুনরায় কাঠামো তৈরির প্রয়োজন হলে এমনটি হতে পারে। The project list then becomes effectively inaccessible to older versions of Firefox.

+ +

No data has been lost, but you will need to keep using the newest version of Firefox that was used with your profile to get the project list back.

+ +

If really want to use the older version of Firefox, you can attempt to delete just the project list in the following way, but this is unsupported and could result in the further problems or additional data loss:

+ +
    +
  1. Close Firefox
    2. +
  2. Find your Firefox profile directory
    3. +
  3. Find the storage folder inside the profile directory
    4. +
  4. Under some part of this file tree, there should be files and/or directories that start with 4268914080AsptpcPerjo (a hashed name of the database)
    5. +
  5. Remove any such files and directories
    6. +
  6. Start Firefox and WebIDE again
    7. +
+ +

Enable logging

+ +

You can also enable verbose logging to gather diagnostics:

+ +
    +
  1. Open about:config, and add a new preference called extensions.adbhelper@mozilla.org.sdk.console.logLevel, with the string value all, and set extensions.adbhelper@mozilla.org.debug to true.
    2. +
  2. In the Add-ons Manager, disable and then re-enable the ADB Helper add-on.
    3. +
  3. Open the Browser Console and you'll now see console messages prefixed with adb. If the messages don't mean anything to you, ask for help.
    4. +
+ +

Get help

+ +

Go to the #devtools room on IRC and we will try to help.

diff --git "a/files/bn/tools/\340\246\244\340\247\215\340\246\260\340\246\277\340\246\256\340\246\276\340\246\244\340\247\215\340\246\260\340\246\277\340\246\225_\340\246\246\340\246\260\340\247\215\340\246\266\340\246\250/index.html" "b/files/bn/tools/\340\246\244\340\247\215\340\246\260\340\246\277\340\246\256\340\246\276\340\246\244\340\247\215\340\246\260\340\246\277\340\246\225_\340\246\246\340\246\260\340\247\215\340\246\266\340\246\250/index.html" new file mode 100644 index 0000000000..e1dfb87617 --- /dev/null +++ "b/files/bn/tools/\340\246\244\340\247\215\340\246\260\340\246\277\340\246\256\340\246\276\340\246\244\340\247\215\340\246\260\340\246\277\340\246\225_\340\246\246\340\246\260\340\247\215\340\246\266\340\246\250/index.html" @@ -0,0 +1,96 @@ +--- +title: ত্রিমাত্রিক দর্শন +slug: Tools/ত্রিমাত্রিক_দর্শন +translation_of: Tools/3D_View +--- +
{{ToolsSidebar}}

{{ fx_minversion_header("11") }}

+ +

যখন আপনি ত্রিমাত্রিক(3D) দর্শন বোতাম চাপ দিবেন, পাতাটি ত্রিমাত্রিক দর্শন প্রক্রিয়ায় যাবে; এই প্রক্রিয়ায় আপনি দেখতে পাবেন আপনার পাতা ত্রিমাত্রিক(3D) দৃশ্যে উপস্থাপন করে HTML-এর চারকোনা ঘর যা ক্রমবর্ধমান "লম্বা" হয়, যেটি আপনার পৃষ্ঠাকে বাইরের দিকে ঠেলে দিচ্ছে। এই দৃশ্যে দেখা যায় আপনার বিষয়বস্তুগুলো আরও সহজে ঘরের আকৃতিতে প্রকাশ পায়।

+ +

+ +

চেপে রেখে এবং টেনে ধরে, বিভিন্ন কোণ থেকে দেখার জন্য আপনি আপনার পৃষ্ঠার DOM(Document Object Model) অনুক্রমের ত্রিমাত্রিক বর্ণনাটি ঘোরাতে পারেন এবং পুনরায় দ্যুতিময় করতে পারেন, এর কাঠামো ভালোমতো পরীক্ষার জন্য। পর্দার আড়ালে থাকা উপাদানসমূহ দৃশ্যমান হবে, যার ফলে আপনি দেখতে পাবেন কোথায় উপাদানগুলোর সম্পর্ক স্থাপিত হয় দৃশ্যমান উপাদান এর সাথে। আপনি উপাদানে চেপে HTML সূচি অথবা Style সূচি থেকে তাদের HTML দেখতে পারেন। বিপরীতভাবে, আপনি breadcrumb bar(এক প্রকার পরিভ্রমণ দণ্ড) এর উপাদানগুলোতে চেপে কোন কোন উপাদান ত্রিমাত্রিক দৃশ্যে থাকবে তা নির্বাচন করতে পারবেন।

+ +

If you do not see the 3D button in the page inspector, it is possible that your graphics driver needs to be updated. See the blocklisted drivers page for more information.

+ +

Controlling the 3D view

+ +

There are keyboard shortcuts and mouse controls available for the 3D view.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FunctionKeyboardMouse
Zoom in/out+ / -Scroll wheel up/down
Rotate left/righta / dMouse left/right
Rotate up/downw / sMouse up/down
Pan left/right← / →Mouse left/right
Pan up/down↑ / ↓Mouse up/down
Reset zoom level0Resets the zoom level to the default
Focus on selected nodefMakes sure the currently selected node is visible {{ fx_minversion_inline("13.0") }}
Reset viewrResets zoom, rotation, and panning to the default {{ fx_minversion_inline("12.0") }}
Hide current nodexMakes the currently selected node invisible; this can be helpful if you need to get at a node that's obscured {{ fx_minversion_inline("12.0") }}
+ +

Use cases for the 3D view

+ +

There are a variety of ways the 3D view is useful:

+ + + +

See also

+ + + +

{{ languages( { "ja": "ja/Tools/Page_Inspector/3D_view", "zh-cn": "zh-cn/Tools/Page_Inspector/3D_view"} ) }}

-- cgit v1.2.3-54-g00ecf